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

Antworten:

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