HTML-Tags aus String in JavaScript entfernen

  2. How-To's
  3. JavaScript-Anleitungen
  4. HTML-Tags aus String in JavaScript …
Habdul Hazeez 15 Februar 2024
JavaScript JavaScript HTML
  1. Entfernen Sie HTML-Tags mit regulären Ausdrücken
  2. HTML-Tags mit textContent entfernen
  3. Entfernen Sie HTML-Tags mit jQuery
  4. Entfernen Sie HTML-Tags mit DOMParser
  5. Entfernen Sie HTML-Tags mit dem String-Strip-HTML-Paket
HTML-Tags aus String in JavaScript entfernen

Dieser Artikel stellt anhand von Beispielen vor, wie HTML-Tags mithilfe verschiedener Methoden aus einer Zeichenfolge entfernt werden.

Entfernen Sie HTML-Tags mit regulären Ausdrücken

Sie können ein reguläres Ausdrucksmuster erstellen, das mit den HTML-Tags in Ihrer Zeichenfolge übereinstimmt. Daher können Sie jede Übereinstimmung durch eine leere Zeichenfolge ersetzen.

Dadurch werden die HTML-Tags effektiv aus der Zeichenfolge entfernt.

Wir haben im folgenden Code ein reguläres Ausdrucksmuster definiert, das die HTML-Tags ersetzt. Es ist jedoch nicht kugelsicher.

Jeder kann das reguläre Ausdrucksmuster durchbrechen, indem er fehlerhaftes HTML bereitstellt. Wenn also das fehlerhafte HTML etwas JavaScript enthält, könnte es ausgeführt werden.

Oder das Muster entfernt die gesamte Zeichenfolge und Sie erhalten eine leere Zeichenfolge zurück.

let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
let cleanHTML = html.replace(/<\/?[^>]+(>|$)/gi, '');
console.log(cleanHTML);

Ausgang:

hello world

Versuchen Sie nun denselben Code mit einem fehlerhaften HTML:

let html = '<div data="score> 42">Hello</div>';
let cleanHTML = html.replace(/<\/?[^>]+(>|$)/gi, '');
console.log(cleanHTML);

Ausgang:

 42">Hello

HTML-Tags mit textContent entfernen

Die Methode textContent gibt den Text aus einem HTML-String zurück. Es eignet sich perfekt, um Cross-Site-Scripting-Angriffe zu verhindern.

Wir haben textContent verwendet, um die HTML-Tags in unserem Beispielcode unten zu entfernen. Beachten Sie jedoch Folgendes, wenn Sie unseren Ansatz verwenden:

  1. Das HTML ist innerhalb eines <div>-Elements gültig. Das liegt daran, dass HTML in einem <body> oder <html> innerhalb eines <div>-Elements nicht gültig ist.
  2. Die Methode textContent fügt Text in ein <script>-Element ein. Wenn also der String <script>-Elemente enthält, gibt diese Methode mit textContent seinen Inhalt zurück.
  3. Stellen Sie basierend auf dem vorherigen Punkt sicher, dass der HTML-Code keine <script>-Elemente enthält.
  4. Stellen Sie sicher, dass das HTML nicht null ist.
  5. Der HTML-Code stammt aus einer vertrauenswürdigen Quelle. Das liegt daran, dass der folgende HTML-Code diese Methode durchdringt: <img onerror='alert(\"Gefährliches JavaScript ausführen\")' src=nonexistence>

Beispiel:

let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);

Ausgang:

hello world

Wenn Sie die Zeichenfolge so aktualisieren, dass sie das Element <script> enthält:

let htmlWithScriptElement = '<script>alert("Hello world");<\/script>';
let html =
    `<h1 class='header_tag'>hello <i>world</i> ${htmlWithScriptElement}</h1>`;
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);

Ausgang:

hello world alert("Hello world");

Sie erhalten den Inhalt des Elements <script>.

Von unserem letzten Punkt, wie das HTML aus einer vertrauenswürdigen Quelle stammen sollte, könnte es sich als kostspielig erweisen, wenn dies nicht der Fall ist.

// This time the HTML contains code
// that'll get through stripping HTML tags
// with textContent
let html =
    '<img onerror=\'alert("Run dangerous JavaScript")\' src=nonexistence>';

let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);

Ausgang:

Ausführung von unerwünschtem JavaScript-Code

Entfernen Sie HTML-Tags mit jQuery

Die jQuery-Bibliothek verfügt über die .text()-API, die den Text aus einer Zeichenfolge zurückgibt, die HTML enthält. Sie könnten jedoch die JavaScript-native innerText-Methode verwenden.

Der Ansatz von jQuery ist jedoch browserübergreifend. Wir haben die .text()-API verwendet, um den HTML-Code aus der angegebenen Zeichenfolge im folgenden Code zu entfernen.

Beispiel:

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        let html = "<h1 class='header_tag'>hello <i>world</i></h1>";
        console.log($(html).text());
    </script>
</body>

Ausgang:

hello world

In der Zwischenzeit erfordert dieser Ansatz, dass der HTML-Code aus einer vertrauenswürdigen Quelle stammt. Andernfalls könnten Sie beliebigen JavaScript-Code ausführen.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        let html = "<img onerror='alert(\"Run dangerous JavaScript\")' src=nonexistence>";
        console.log($(html).text());
    </script>
</body>

Ausgang:

Ausführung von unerwünschtem JavaScript-Code

Entfernen Sie HTML-Tags mit DOMParser

Mit Hilfe des DOMParser können Sie einen HTML-Code parsen. Wenn also ein String HTML-Code enthält, können Sie die HTML-Tags mit dem DOMParser und seiner parseFromSring()-Methode entfernen.

Darüber hinaus verhindert diese Methode das willkürliche JavaScript, das weiter oben in diesem Artikel besprochen wurde.

Wir haben DOMParser.parseFromString() verwendet, um die HTML-Tags aus dem String im folgenden Code zu entfernen.

Beispiel:

function stripHTMLTags(html) {
  const parseHTML = new DOMParser().parseFromString(html, 'text/html');
  return parseHTML.body.textContent || '';
}

let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
console.log(stripHTMLTags(html));

Ausgang:

hello world

In der Zwischenzeit gibt DOMParser.parseFromString() einen leeren String für den beliebigen JavaScript-Code zurück:

function stripHTMLTags(html) {
  const parseHTML = new DOMParser().parseFromString(html, 'text/html');
  return parseHTML.body.textContent || '';
}

let html =
    '<img onerror=\'alert("Run dangerous JavaScript")\' src=nonexistence>';
console.log(stripHTMLTags(html));

Ausgang:

<empty string>

Entfernen Sie HTML-Tags mit dem String-Strip-HTML-Paket

Das Paket string-strip-html wurde entwickelt, um HTML aus einem String zu entfernen. Das Paket stellt eine stringStripHtml-Methode bereit, die einen HTML-Code als Eingabe verwendet.

Danach gibt es einen String zurück, der frei von HTML-Tags ist. Wenn der String das Element <script> enthält, entfernt string-strip-html es und seinen Inhalt.

Im folgenden Code haben wir einen HTML-String an die Methode stringStripHtml übergeben. Dieser HTML-String enthält das Element <script>.

Es wird jedoch entfernt, wenn Sie den Code in Ihrem Webbrowser ausführen.

<body>
    <script src="https://cdn.jsdelivr.net/npm/string-strip-html/dist/string-strip-html.umd.js"></script>
    <script type="text/javascript">
        const { stripHtml } = stringStripHtml;

        let htmlWithScriptElement = '<script>alert("Hello world");<\/script>';
        let html = `<h1 class='header_tag'>hello <i>world</i> ${htmlWithScriptElement}</h1>`;

        console.log(stripHtml(html).result);
    </script>
</body>

Ausgang:

hello world
Autor: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Verwandter Artikel - JavaScript HTML