web-dev-qa-db-fra.com

Comment enlever les balises HTML de la chaîne en JavaScript?

Duplicate possible:
Supprimer le code HTML du texte JavaScript

Comment puis-je supprimer le code HTML d'une chaîne en JavaScript?

javascripthtml-parsing
167
f.ardelian

Utiliser l'analyseur du navigateur est probablement le meilleur choix dans les navigateurs actuels. Ce qui suit fonctionnera, avec les mises en garde suivantes:

  • Votre code HTML est valide dans un élément <div>. Le code HTML contenu dans les balises <body> ou <html> ou <head> n'est pas valide dans un <div> et ne peut donc pas être analysé correctement.
  • textContent (propriété standard DOM) et innerText (propriétés non standard) ne sont pas identiques . Par exemple, textContent inclura du texte dans un élément <script> alors que innerText ne le fera pas (dans la plupart des navigateurs). Ceci n'affecte que IE <= 8, qui est le seul navigateur majeur à ne pas prendre en charge textContent.
  • Le code HTML ne contient pas d'éléments <script>.
  • Le HTML n'est pas null
  • Le code HTML provient d'une source de confiance. Son utilisation avec du code HTML arbitraire permet d'exécuter du code JavaScript non approuvé arbitraire. Cet exemple est tiré d'un commentaire de Mike Samuel sur la question dupliquée: <img onerror='alert(\"could run arbitrary JS here\")' src=bogus>

Code:

var html = "<p>Some HTML</p>";
var div = document.createElement("div");
div.innerHTML = html;
var text = div.textContent || div.innerText || "";
220
Tim Down
cleanText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");

Distillé à partir de ce site Web (web.archive) .

255
ReactiveRaven
var html = "<p>Hello, <b>World</b>";
var div = document.createElement("div");
div.innerHTML = html;
alert(div.innerText); // Hello, World

Pour ce faire, vous laissez le navigateur faire ce qu’il fait de mieux: analyser le code HTML.

Edit: Comme indiqué dans les commentaires ci-dessous, ce n'est pas la solution la plus multi-navigateur. La solution la plus multi-navigateur serait de parcourir de manière récursive tous les enfants de l'élément et de concaténer tous les nœuds de texte que vous trouverez. Cependant, si vous utilisez jQuery, il le fait déjà pour vous:

alert($("<p>Hello, <b>World</b></p>").text());

Découvrez la méthode text .

46
Felix

Je sais que cette question a une réponse acceptée, mais j'estime que cela ne fonctionne pas dans tous les cas.

Pour être complet et comme j'ai passé trop de temps là-dessus, voici ce que nous avons fait: nous avons fini par utiliser une fonction de php.js (qui est une jolie bibliothèque pour ceux qui sont plus familiers avec PHP mais aussi faire un peu de JavaScript de temps en temps):

http://phpjs.org/functions/strip_tags:535

Il semble que ce soit le seul élément de code JavaScript capable de gérer avec succès tous les types d'entrées que j'ai introduites dans mon application. C'est-à-dire sans le casser - voir mes commentaires sur la balise <script /> ci-dessus.

25
Till