HTML-Entities sind Platzhalter für Sonderzeichen in HTML. Zeichen wie <, >, &, " und ' haben spezifische Bedeutungen innerhalb von HTML und müssen maskiert werden, um eine Störung der Dokumentstruktur zu vermeiden. Beim Abrufen von HTML von einem Server oder Benutzereingaben müssen diese Entities oft dekodiert werden, um sie korrekt anzuzeigen und zu verarbeiten. Dieser Artikel beschreibt zwei Methoden zum Dekodieren von HTML-Entities mit JavaScript.
Inhaltsverzeichnis
- Dekodieren von HTML-Entities mit Vanilla JavaScript
- Dekodieren von HTML-Entities mit der
he-Bibliothek
Dekodieren von HTML-Entities mit Vanilla JavaScript
Vanilla JavaScript bietet eine einfache Möglichkeit, HTML-Entities mithilfe des integrierten DOMParser des Browsers zu dekodieren. Diese Methode ist effizient und benötigt keine externen Bibliotheken. Sie verarbeitet jedoch möglicherweise nicht alle Entities perfekt, insbesondere weniger gebräuchliche oder benutzerdefinierte.
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// Beispiel Verwendung:
const encodedText = '<p>Dies ist ein Absatz mit & darin.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // Ausgabe: Dies ist ein Absatz mit & darin.
Diese Funktion analysiert die Eingabezeichenkette als HTML mit DOMParser. Die textContent-Eigenschaft des Stammelements gibt dann den dekodierten Text zurück und entfernt dabei HTML-Tags und ersetzt Entities. Beachten Sie, dass diese Methode auch alle in der Eingabe vorhandenen HTML-Tags entfernt.
Dekodieren von HTML-Entities mit der he-Bibliothek
Für eine umfassendere Dekodierung, insbesondere für eine größere Bandbreite an Entities, ist die he-Bibliothek eine robuste Lösung. Sie ist leichtgewichtig und über npm oder ein CDN leicht verfügbar.
Installation (npm):
npm install he
Installation (CDN – jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
Nach der Installation verwenden Sie die Funktion he.decode():
// Angenommen, die 'he'-Bibliothek ist enthalten
const encodedText = '<p>Dies ist ein Absatz mit & und ' darin.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // Ausgabe: Dies ist ein Absatz mit & und ' darin.
he.decode() verarbeitet ein breiteres Spektrum an Entities, einschließlich numerischer Entities wie ' (einfaches Anführungszeichen).
Methodenwahl
Beide Methoden dekodieren HTML-Entities effektiv. Der Vanilla-JavaScript-Ansatz eignet sich für einfache Fälle und vermeidet externe Abhängigkeiten. Für komplexe Szenarien oder eine größere Bandbreite an Entities bietet die he-Bibliothek eine zuverlässigere Lösung. Benutzereingaben sollten immer bereinigt werden, um Sicherheitslücken zu vermeiden.