Supprimer les balises HTML en Javascript avec Regex

108

J'essaie de supprimer toutes les balises html d'une chaîne en Javascript. Voici ce que j'ai ... Je ne peux pas comprendre pourquoi ça ne marche pas ... tout le monde sait ce que je fais de mal?

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

Merci beaucoup!

javascript regex Gabe
la source

Réponses:

237

Essayez ceci, en notant que la grammaire du HTML est trop complexe pour que les expressions régulières soient correctes 100% du temps:

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

Si vous souhaitez utiliser une bibliothèque telle que jQuery , vous pouvez simplement faire ceci:

console.log($('<p>test</p>').text());
karim79
la source
2
Pourquoi enveloppez-vous l'expression régulière dans une chaîne? var regex = / (<([^>] +)>) / ig;
brianary
Cela ne fonctionnera pas. Plus précisément, il échouera sur les balises courtes: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
Mike Samuel
4
C'est une vieille question mais je vais juste la poster ici: jsperf.com/regex-replace-vs-jquery-text
Joshua
2
Essayez de l'exécuter "<img src=bogus onerror=alert(1337)". Le premier échoue parce que l'analyseur HTML n'exige pas que la dernière balise soit fermée par un >, et le second échoue parce que le chargement de l'image commence avant même qu'un arbre DOM analysé soit ajouté au DOM, et $('<img ...>')appelle l'analyseur HTML.
Mike Samuel
1
La solution regex échouera également si a >est inclus dans une valeur d'attribut; like this<div data="a + b > c">
MT0
34

C'est une vieille question, mais je suis tombé dessus et j'ai pensé partager la méthode que j'ai utilisée:

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized contiendra désormais: "some text and some more text"

Simple, pas besoin de jQuery, et il ne devrait pas vous laisser tomber même dans des cas plus complexes.

jsdw
la source
Hiya. Eh bien, fondamentalement, tout ce qu'il fait est de créer un nouveau DIV, de définir le contenu HTML interne sur ce qui est fourni (ce qui, je suppose, signifie que tout code HTML est analysé), puis demande tout le contenu texte du div, qui ignore ledit HTML .
jsdw
dans mon navigateur l'objet n'a pas de champinnerText
Adrian
@Adrian la dernière ligne sélectionnera la sortie de temp.textContentsi elle existe, et essaiera seulement temp.innerTextsi elle n'existe pas. Votre navigateur devrait avoir le premier, mais pour les navigateurs qui n'en ont pas, le dernier est utilisé à la place :)
jsdw
Après avoir examiné cela à nouveau (il y a tellement de réponses là-bas). J'utilise cette méthode. Il s'agit de la même méthode utilisée dans text-angular. Ils ont ajouté quelques extras que j'ai inclus dans ce fil
Rentering.com
Cette solution a échoué pour moi, j'utilise @kolkov Text Editor pour Angular.
Waseem Ahmad Naeem
10

Cela a fonctionné pour moi.

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

la source
5
+1 merci. cette doublure était parfaite pour mes besoins. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger
6

Voici comment TextAngular (WYSISYG Editor) le fait. J'ai également trouvé que c'était la réponse la plus cohérente, qui n'est PAS DE REGEX.

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}
Rentering.com
la source
2

vous pouvez utiliser une bibliothèque puissante pour la gestion String qui est undrescore.string.js 

_('a <a href="#">link</a>').stripTags()

=> 'un lien'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'un linkalert ("bonjour le monde!")'

N'oubliez pas d'importer cette bibliothèque comme suit: 

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>
Abdennour TOUMI
la source
2
J'ai regardé la source, et ils utilisent en fait la même expression régulière suggérée dans une autre réponse en interne.
eugene
2

ma bibliothèque JavaScript simple appelée FuncJS a une fonction appelée "strip_tags ()" qui fait la tâche à votre place - sans que vous ayez à saisir d'expressions régulières.

Par exemple, disons que vous souhaitez supprimer les balises d'une phrase - avec cette fonction, vous pouvez le faire simplement comme ceci:

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

Cela produira "Cette chaîne contient beaucoup de balises!".

Pour une meilleure compréhension, veuillez lire la documentation sur GitHub FuncJS .

De plus, si vous le souhaitez, veuillez fournir des commentaires via le formulaire. Cela me serait très utile!

Sharikul Islam
la source
Pourriez-vous peut-être dire ce que strip_tags()fait au lieu de simplement promouvoir votre bibliothèque et de ne pas l'expliquer? Le lien explique l'utilisation de l'API mais pas ce qu'elle fait .
Justin Beaudry
1
eh bien, l'a trouvé sur ce site Web qu'il a donné,strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };
Predrag Stojadinović
1

Il s'agit d'une solution pour la balise HTML et & nbsp etc. et vous pouvez supprimer et ajouter des conditions pour obtenir le texte sans HTML et vous pouvez le remplacer par n'importe quel.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}
Sahil Ralkar
la source
0 
<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>
Surya R Praveen
la source
0

La réponse sélectionnée ne garantit pas toujours que le HTML est supprimé, car il est toujours possible de construire une chaîne HTML non valide à travers elle en créant une chaîne comme celle-ci.

  "<<h1>h1>foo<<//</h1>h1/>"

Cette entrée garantira que le décapage assemble un ensemble de balises pour vous et se traduira par:

  "<h1>foo</h1>"

De plus, la fonction de texte de jquery supprimera le texte non entouré de balises.

Voici une fonction qui utilise jQuery mais qui devrait être plus robuste dans ces deux cas:

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};
Rick Moynihan
la source
0

La façon dont je le fais est pratiquement une ligne unique.

La fonction crée un objet Range , puis crée un DocumentFragment dans le Range avec la chaîne comme contenu enfant.

Ensuite, il saisit le texte du fragment, supprime tous les caractères «invisibles» / de largeur nulle et le rogne de tout espace blanc de début / de fin.

Je me rends compte que cette question est ancienne, je pensais juste que ma solution était unique et je voulais la partager. :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);
ÉlieFowler
la source
-1

Comme d'autres l'ont dit, regex ne fonctionnera pas. Prenez un moment pour lire mon article sur les raisons pour lesquelles vous ne pouvez pas et ne devriez pas essayer d'analyser le html avec regex, ce que vous faites lorsque vous essayez de supprimer le html de votre chaîne source.

Cole
la source