Javascript “striptags”: HTML Befehle aus Variable entfernen!

PHP hat die Funktion “striptags”, mit der sich ganz leicht sämtliche HTML Befehle aus einem Wert entfernen lassen. In Javascript gibt es dafür zwar keinen Befehl, man kann sich mit einem kleinen Trick aber ganz gut behelfen! Wichtig ist das zum Beispiel, um einen Text weiter zu verarbeiten, oder auch nur um Wörter und Buchstaben zu zählen.

Javascript: HTML Befehle entfernen

Eine eigene Funktion hat Javascript nicht, um HTML Befehle aus einem Wert oder einer Variable zu löschen. Das macht aber nichts, man kann “innerHTML” und “innerText” dafür nutzen: Dies ist eigentlich gedacht, um den Inhalt eines Elements entweder auszulesen oder zu ändern. Mit innerText liest man dabei den reinen Text aus, mit innerHTML auch (mögliche) HTML Befehle.

 
Beispiel: innerHTML und innerText

Wenn es der Webseite ein <div> Element mit der id “div” gibt, kann man so auf den Inhalt zugreifen, ihn auslesen oder verändern:

var html = document.getElementById('div').innerHTML;
var text = document.getElementById('div').innerText;

Die Variable “html” enthält anschließend den Inhalt des Elements mit allen HTML-Kommandos, die Variable “text” enthält nur den Text-Inhalt ohne HTML: Die HTML Befehle sind hierbei automatisch beim Auslesen gelöscht worden.

Dies kann man jetzt ausnutzen, indem man ein neues Element an das Dokument hinzufügt, den kompletten Text mit HTML Befehlen dort ablegt und dann die Text-Version wieder ausliest: So enthält die Variable “text” dann nur Buchstaben und Ziffern, keine HTML Befehle mehr!

Man kann mit diesem Code also zum Beispiel den Wert einer textarea auslesen, in einem neuen Element speichern und dann nur die Text-Version auslesen:

var textarea = document.getElementById('textarea');
var newtextarea = '';
var div = document.createElement("div");

div.innerHTML = textarea.value;
newtextarea = div.innerText;

Alternativ zu “innerText” kann man auch “textContent” benutzen: Dies wird noch besser von den Browsern unterstützt. Während alle aktuellen Browser seit Jahren beides unterstützt, kennt Microsoft “innerHTML” erst mit Version 10 des Internet Explorer, “textContent” bereits mit Version 9.

textContent gibt dabei, anders als innerText, auch den Inhalt mit <script> und <style> Befehlen zurück: innerText löscht diese ebenfalls mit den anderen HTML Befehlen aus dem Text.