Wie entferne ich HTML-Tags mit jQuery?

72

Ich möchte HTML-Tags aus einer Zeichenfolge entfernen. Angenommen, wir haben die Zeichenfolge:

 <p> example ive got a string</P>

Wie kann ich eine Funktion schreiben, die das entfernt <p><p>und nur "Beispiel ive got a string" zurückgibt?

jquery

— Sadda-Shutu
quelle

2

Ein schneller Google würde Sie diese Frage finden: stackoverflow.com/questions/5002111/…, die selbst ein Duplikat von stackoverflow.com/questions/822452/… ist

— totalNotLizards

77

Am sichersten ist es, sich auf den Browser TextNode zu verlassen, um den Inhalt korrekt zu umgehen. Hier ist ein Beispiel:

function stripHTML(dirtyString) {
  var container = document.createElement('div');
  var text = document.createTextNode(dirtyString);
  container.appendChild(text);
  return container.innerHTML; // innerHTML will be a xss safe string
}

document.write( stripHTML('<p>some <span>content</span></p>') );
document.write( stripHTML('<script><p>some <span>content</span></p>') );

Erweitern Sie das Snippet

Beachten Sie hierbei, dass der Browser beim Zugriff auf die HTML-Zeichenfolgen ( innerHTML, outerHTML) den Sonderzeichen von TextNodes entgeht . Im Vergleich dazu führt der Zugriff auf Textwerte ( innerText, textContent) zu rohen Zeichenfolgen, was bedeutet, dass sie unsicher sind und XSS enthalten können.

Wenn Sie jQuery verwenden , ist die Verwendung .text()sicher und abwärtskompatibel. Siehe die anderen Antworten auf diese Frage.

Der einfachste Weg in reinem JavaScript, wenn Sie mit Browsern <= Internet Explorer 8 arbeiten, ist:

string.replace(/(<([^>]+)>)/ig,"");

Es gibt jedoch einige Probleme beim Parsen von HTML mit Regex, sodass dies keine sehr gute Sicherheit bietet. Außerdem werden nur HTML-Zeichen berücksichtigt, sodass es nicht vollständig xss-sicher ist.

— Simon Boudrias
quelle

4

Der Versuch, HTML mit regulären Ausdrücken zu entfernen, ist eine schlechte Idee .

— Ymln

1

@ymln das ist längst überfällig, aber ich habe die Antwort mit viel mehr Details und einer sicheren Möglichkeit aktualisiert, Text ohne jQuery zu extrahieren.

— Simon Boudrias

Dies scheint zu brechen, wenn Sie ein nicht geschlossenes '<script>' - Tag einfügen. zB console.log( stripHTML('<script><p>some <span>content</span></p>') );wird zurückkehren'<p>some <span>content</span></p>'

— Matthew Wilcoxson

1

@MatthewWilcoxson hat eine Weile gebraucht, um hierher zurückzukehren, aber hier ist die Antwort behoben. Hoffentlich ohne andere Randfälle.

— Simon Boudrias

2

Die bereitgestellte Funktion stripHTML entfernt kein HTML, sondern HTML-codiert Sonderzeichen.

— David Cook

132

Verwenden Sie die .text()Funktion:

var text = $("<p> example ive got a string</P>").text();

Update : Wie Brilliand weiter unten ausführt, wird die Eingabezeichenfolge möglicherweise als CSS-Selektor behandelt, wenn sie keine Tags enthält und Sie Pech haben. Diese Version ist also robuster:

var text = $("<div/>").html("<p> example ive got a string</P>").text();

— Jon
quelle

28

Es ist gefährlich, den HTML-Code direkt in $ () einzufügen, da dies ihn auf andere Weise interpretieren könnte (dh als CSS-Selektor). Verwenden Sie $("<div/>").html("<p> example ive got a string</P>").text()stattdessen.

— Brilliand

1

@ Brilliand: Guter Punkt. Ich habe den Vorschlag in die Antwort aufgenommen, danke!

— Jon

1

@Nile: jQuery erstellt dazu DOM-Knoten und ruft deren Reintextwerte ab (wodurch der Browser die harte Arbeit effektiv erledigt), sodass Skripte gegebenenfalls ausgeführt werden. Es gibt keine Möglichkeit, diese AFAIK zu verhindern.

— Jon

1

Wenn Sie mit einem dynamischen Inhalt arbeiten und der Inhalt ein einfacher Text und kein HTML ist, führt dies zu Fehlern. Also benutze ich$('<span>'+content+'</span>').text();

— Anis

1

@ vipero07, in meinen Tests wird das Skript nicht ausgeführt. Die <script>Tags werden entfernt und Sie haben nur nochalert('hello');

— David Cook

3

Wenn Sie das innerHTML des Elements beibehalten und nur das äußerste Tag entfernen möchten, können Sie Folgendes tun:

$(".contentToStrip").each(function(){
  $(this).replaceWith($(this).html());
});

— Ginosuave
quelle

2

Dies ist ein Beispiel, um das URL-Bild abzurufen und das p-Tag von einem Element zu entfernen.

Versuche dies:

$('#img').attr('src').split('<p>')[1].split('</p>')[0]

— SocialSupport - Seonictech
quelle

1

Sie können die vorhandene Split-Funktion verwenden

Ein einfaches und abgehacktes Beispiel:

var str = '<p> example ive got a string</P>';
var substr = str.split('<p> ');
// substr[0] contains ""
// substr[1] contains "example ive got a string</P>"
var substr2 = substr [1].split('</p>');
// substr2[0] contains "example ive got a string"
// substr2[1] contains ""

Das Beispiel soll Ihnen nur zeigen, wie die Aufteilung funktioniert.

— VicoMan
quelle