Entfernen Sie HTML-Tags in Javascript mit Regex

108

Ich versuche, alle HTML-Tags aus einer Zeichenfolge in Javascript zu entfernen. Hier ist was ich habe ... Ich kann nicht herausfinden warum es nicht funktioniert ... weiß jemand was ich falsch mache?

<script type="text/javascript">

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

</script>

Vielen Dank!

javascript regex Gabe
quelle

Antworten:

237

Versuchen Sie dies und beachten Sie, dass die Grammatik von HTML zu komplex ist, als dass reguläre Ausdrücke 100% der Zeit korrekt wären:

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

console.log(result);

Wenn Sie bereit sind, eine Bibliothek wie jQuery zu verwenden , können Sie dies einfach tun:

console.log($('<p>test</p>').text());
karim79
quelle
2
Warum wickeln Sie den regulären Ausdruck in eine Zeichenfolge ein? var regex = / (<([^>] +)>) / ig;
Brian
Das wird nicht funktionieren. Insbesondere wird es bei kurzen Tags fehlschlagen
Mike Samuel
4
Dies ist eine alte Frage, aber ich werde dies nur hier posten
Joshua
2
Versuchen Sie dies weiter auszuführen "<img src=bogus onerror=alert(1337)". Der erste schlägt fehl, weil der HTML-Parser nicht erfordert, dass das letzte Tag durch a geschlossen wird >, und der zweite schlägt fehl, weil das Laden von Bildern beginnt, noch bevor ein analysierter DOM-Baum zum DOM hinzugefügt wird, und $('<img ...>')der HTML-Parser aufgerufen wird.
Mike Samuel
1
Die Regex-Lösung schlägt auch fehl, wenn a >in einem Attributwert enthalten ist. so<div data="a + b > c">
MT0
34

Dies ist eine alte Frage, aber ich bin darüber gestolpert und dachte, ich würde die Methode teilen, die ich verwendet habe:

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 wird jetzt enthalten: "some text and some more text"

Einfach, keine jQuery erforderlich, und es sollte Sie auch in komplexeren Fällen nicht im Stich lassen.

jsdw
quelle
Hiya. Nun, im Grunde ist alles, was es tut, ein neues DIV zu erstellen, den inneren HTML-Inhalt auf das zu setzen, was bereitgestellt wird (was meiner Meinung nach bedeutet, dass jeder HTML-Code analysiert wird) und dann nach dem gesamten Textinhalt des div zu fragen, wobei dieser HTML-Code ignoriert wird .
jsdw
In meinem Browser hat das Objekt kein FeldinnerText
Adrian
@Adrian Die letzte Zeile wählt die Ausgabe von aus, temp.textContentfalls vorhanden, und versucht temp.innerTextes nur, wenn dies nicht der Fall ist. Ihr Browser sollte den ersteren haben, aber für Browser, die dies nicht tun, wird der letztere stattdessen verwendet :)
jsdw
Nachdem ich das noch einmal untersucht habe (es gibt so viele Antworten da draußen). Ich benutze diese Methode. Dies ist die gleiche Methode, die auch für Textwinkel verwendet wird. Sie haben ein paar Extras hinzugefügt, die ich in diesen Thread aufgenommen habe
Rentering.com
Diese Lösung ist für mich fehlgeschlagen. Ich verwende @kolkov Text Editor für Angular.
Waseem Ahmad Naeem
10

Das hat bei mir funktioniert.

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

quelle
5
+1 danke. Dieser eine Liner wachte perfekt für meine Bedürfnisse. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger
6

So macht es TextAngular (WYSISYG Editor). Ich fand auch, dass dies die konsequenteste Antwort ist, nämlich NO 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
quelle
2

Sie können eine leistungsstarke Bibliothek für die Verwaltungszeichenfolge verwenden, die undrescore.string.js lautet 

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

=> 'ein Link'

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

=> 'ein Linkalert ("Hallo Welt!")'

Vergessen Sie nicht, diese Bibliothek wie folgt zu importieren: 

        <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
quelle
2
Ich habe mir die Quelle angesehen und sie verwenden tatsächlich denselben regulären Ausdruck, der in einer anderen internen Antwort vorgeschlagen wurde.
Eugene
2

mein einfaches JavaScript-Bibliothek namens FuncJS hat eine Funktion namens "strip_tags ()", die die Aufgabe für Sie erledigt - ohne dass Sie reguläre Ausdrücke eingeben müssen.

Angenommen, Sie möchten Tags aus einem Satz entfernen. Mit dieser Funktion können Sie dies einfach folgendermaßen tun:

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

Dies erzeugt "Diese Zeichenfolge enthält viele Tags!".

Zum besseren Verständnis lesen Sie bitte die Dokumentation bei GitHub FuncJS .

Wenn Sie möchten, geben Sie bitte über das Formular ein Feedback. Es wäre sehr hilfreich für mich!

Sharikul Islam
quelle
Könnten Sie vielleicht angeben, was Sie tun, strip_tags()anstatt nur für Ihre Bibliothek zu werben und sie nicht zu erklären? Der Link erklärt die API-Verwendung, aber nicht, was sie tut .
Justin Beaudry
1
Nun, fand es auf der Website, die er gab,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

Dies ist eine Lösung für HTML-Tags und & nbsp usw., und Sie können Bedingungen entfernen und hinzufügen, um den Text ohne HTML zu erhalten, und Sie können ihn durch einen beliebigen ersetzen.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}
Sahil Ralkar
quelle
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
quelle
0

Die ausgewählte Antwort stellt nicht immer sicher, dass HTML entfernt wird, da es weiterhin möglich ist, eine ungültige HTML-Zeichenfolge zu erstellen, indem eine Zeichenfolge wie die folgende erstellt wird.

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

Diese Eingabe stellt sicher, dass das Strippen eine Reihe von Tags für Sie zusammenstellt und führt zu:

  "<h1>foo</h1>"

Zusätzlich entfernt die Textfunktion von jquery Text, der nicht von Tags umgeben ist.

Hier ist eine Funktion, die jQuery verwendet, aber in beiden Fällen robuster sein sollte:

var stripHTML = function(s) {
    var lastString;

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

    return s;
};
Rick Moynihan
quelle
0

Die Art, wie ich es mache, ist praktisch ein Einzeiler.

Die Funktion erstellt ein Range-Objekt und anschließend ein DocumentFragment im Range mit der Zeichenfolge als untergeordnetem Inhalt.

Dann greift es nach dem Text des Fragments, entfernt alle "unsichtbaren" Zeichen / Zeichen mit der Breite Null und schneidet ihn von allen führenden / nachfolgenden Leerzeichen ab.

Mir ist klar, dass diese Frage alt ist. Ich dachte nur, meine Lösung sei einzigartig und wollte sie teilen. :) :)

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);
ElijahFowler
quelle
-1

Wie andere gesagt haben, wird Regex nicht funktionieren. Nehmen Sie sich einen Moment Zeit, um meinen Artikel darüber zu lesen, warum Sie nicht versuchen können und sollten, HTML mit Regex zu analysieren. Dies tun Sie, wenn Sie versuchen, HTML aus Ihrer Quellzeichenfolge zu entfernen.

Cole
quelle