HTML-Entitäten mit JavaScript dekodieren

1. Decodieren Sie HTML-Entitäten mit Vanilla JavaScript
2. Dekodierung von HTML-Elementen mit der he-Bibliothek

HTML-Entitäten sind eine Reihe von Zeichencodes, die verwendet werden, um von HTML reservierte Zeichen darzustellen. Es beginnt mit dem kaufmännischen Und & und endet mit einem Semikolon ;. Dieses Bild bietet Ihnen eine Liste von HTML-Zeichencodes mit ihrem jeweiligen Entitätsnamen.

In diesem Artikel wird beschrieben, wie die folgende Zeichenfolge mit JavaScript decodiert wird. Diese Zeichenfolge enthält verschiedene Zeichen wie a, b, c und HTML-Zeicheneinheiten wie &nbps;, <, ' usw.

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';

Der gesamte String wird in der Variablen str gespeichert. Es gibt zwei Möglichkeiten, HTML-Entitäten zu decodieren. Eine Möglichkeit ist die Verwendung von Vanilla-JavaScript, die andere die Verwendung einer externen Bibliothek.

Die externe Bibliothek, die wir verwenden werden, ist die he-Bibliothek. Dies ist eine der am häufigsten verwendeten Bibliotheken zum Kodieren und Dekodieren von HTML-Entitäten.

Decodieren Sie HTML-Entitäten mit Vanilla JavaScript

Eine der einfachsten Möglichkeiten zum Decodieren von HTML-Entitäten ist die Verwendung von Vanilla-JavaScript. Das dafür verwendete Tag ist textarea.

Zuerst erstellen wir eine Funktion namens decodeEntity(), die einen String als Eingabe nimmt. Als Argument übergeben wir dieser Funktion die Variable str.

Innerhalb dieser Funktion erstellen wir zuerst ein textarea-Element mit document.createElement() und speichern dann die Referenz dieser Variablen in der textarea-Variablen.

function decodeEntity(inputStr) {
  var textarea = document.createElement('textarea');
  textarea.innerHTML = inputStr;
  return textarea.value;
}
console.log(decodeEntity(str));

Ausgabe:

var str = "Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please";
var he = require('he');
console.log(he.decode(str));

Wir speichern den String str im textarea mit der Eigenschaft innerHTML. Der Browser wandelt in diesem Schritt das str automatisch wieder in das richtige HTML-Format um. Alle HTML-Entitäten werden dekodiert und alle HTML-Tags werden beibehalten.

Schließlich geben wir unter Verwendung von textarea.value den decodierten Stringwert zurück.

Dekodierung von HTML-Elementen mit der he-Bibliothek

Das he ist eine externe Bibliothek zum Kodieren und Dekodieren von in JavaScript geschriebenen HTML-Entitäten. Diese Bibliothek kann einfach heruntergeladen werden, indem Sie den folgenden Befehl ausführen. Die node.js (beliebige Version) muss auf Ihrem System installiert sein, damit der folgende Befehl erfolgreich ausgeführt werden kann.

Um mehr über die he-Bibliothek zu erfahren, besuchen Sie diesen link.

npm install he

Nachdem wir die Bibliothek he installiert haben, können wir diese Bibliothek mit der Funktion require in unsere JavaScript-Datei importieren und den Namen der Bibliothek he als String an diese Funktion übergeben.

Dann speichern wir die Referenz davon in einer Variablen namens he. Sie können einen beliebigen Namen verwenden, um diese Variable darzustellen.

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';
var he = require('he');
he.decode(str);

Die he-Bibliothek hat eine Funktion namens decode(), die zwei Parameter html und options akzeptiert.

Der Parameter html ist ein String, der aus codierten HTML-Entitäten besteht und zwingend übergeben werden muss. Der Parameter options ist optional und nimmt zwei Werte isAttributeValue und strict an. Wir brauchen diesen zweiten Parameter nicht, also werden wir ihn nicht verwenden.

Wir übergeben die oben erwähnte Variable str an die Funktion he.decode(), und die resultierende Ausgabe sieht wie folgt aus.

Give us some '<h2>time</h2>'&space<br>Please

Es ist einfach, HTML-Entitäten mit einer externen JavaScript-Bibliothek zu dekodieren.