Suche auf infocamp.de & Suche im Web

JS JavaScript & JScript
htmlentities() Funktion ( Stringoperationen )

HTML-Tags und Sonderzeichen maskieren

Möchte man Texte mit JavaScript oder JScript direkt in ein HTML-Dokument ausgeben, was beispielsweise mit document.write() oder innerHTML() geschehen kann, steht man vor dem Problem, dass bestimmte Zeichen vom Webbrowser als HTML Befehle interpretiert werden und sprachspezifische Sonderzeichen wie Umlaute von der eingestellten Zeichencodierung des Webbrowsers abhängen. Unerwünschte Anzeigefehler sind die Folge.

Neben diesem eher kosmetischen Problem besteht speziell bei Daten aus externen oder unbekannten Quellen auch die Gefahr eines so genannten Code Injection Angriffs. Eine solche oft verwendete Quelle sind z.B. URL-Parameter (auch als Query-String bezeichnet), auf die man in JavaScript und JScript mittels location.search() Zugriff hat.

Die nachfolgend beschriebene Funktion htmlentities() für JavaScript bzw. JScript ersetzt neben den vier HTML-eigenen Zeichen auch alle Zeichen des erweiterten ISO-8859-1 Zeichensatz (Bytewert 160 bis 255). Sie bietet einen ähnlichen Funktionsumfang wie ihr PHP Vorbild.

Wenn Sie nur die vier HTML-eigenen Zeichen < (Kleiner-Zeichen), > (Größer-Zeichen), & (Kaufmanns-Und) und " (Doppelte Anführungszeichen) ersetzen wollen, ist die Funktion ► htmlspecialchars() HTML-Tags maskieren besser geeignet.

▲ top

Quelltext mit Erläuterungen

htmlentities()

Syntax:

string htmlentities ( string str , [int typ] )

Quelltext:

 1:  function htmlentities(str,typ) {
 2:    if(typeof str=="undefined") str="";
 3:    if(typeof typ!="number") typ=2;
 4:    typ=Math.max(0,Math.min(3,parseInt(typ)));
 5:    var html=new Array();
 6:    html[38]="&amp;"; html[60]="&lt;"; html[62]="&gt;";
 7:    if(typ==1 || typ==3) html[39]="&#039;";
 8:    if(typ==2 || typ==3) html[34]="&quot;";
 9:    for(var i in html) eval("str=str.replace(/"+String.fromCharCode(i)+"/g,\""+html[i]+"\");");
10:    var entity=new Array(
11:      "&nbsp;","&iexcl;","&cent;","&pound;","&curren;","&yen;","&brvbar;","&sect;",
12:      "&uml;","&copy;","&ordf;","&laquo;","&not;","&shy;","&reg;","&macr;",
13:      "&deg;","&plusmn;","&sup2;","&sup3;","&acute;","&micro;","&para;","&middot;",
14:      "&cedil;","&sup1;","&ordm;","&raquo;","&frac14;","&frac12;","&frac34;","&iquest;",
15:      "&Agrave;","&Aacute;","&Acirc;","&Atilde;","&Auml;","&Aring;","&AElig;","&Ccedil;",
16:      "&Egrave;","&Eacute;","&Ecirc;","&Euml;","&Igrave;","&Iacute;","&Icirc;","&Iuml;",
17:      "&ETH;","&Ntilde;","&Ograve;","&Oacute;","&Ocirc;","&Otilde;","&Ouml;","&times;",
18:      "&Oslash;","&Ugrave;","&Uacute;","&Ucirc;","&Uuml;","&Yacute;","&THORN;","&szlig;",
19:      "&agrave;","&aacute;","&acirc;","&atilde;","&auml;","&aring;","&aelig;","&ccedil;",
20:      "&egrave;","&eacute;","&ecirc;","&euml;","&igrave;","&iacute;","&icirc;","&iuml;",
21:      "&eth;","&ntilde;","&ograve;","&oacute;","&ocirc;","&otilde;","&ouml;","&divide;",
22:      "&oslash;","&ugrave;","&uacute;","&ucirc;","&uuml;","&yacute;","&thorn;","&yuml;"
23:      );
24:    for(var i in entity) eval("str=str.replace(/"+String.fromCharCode(i*1+160)+"/g,\""+entity[i]+"\");");
25:    return str;
26:    }

Durch Klick in das Textfeld markieren Sie den Quelltext, um ihn zu kopieren.

Erläuterungen:

2: Stelle sicher, dass die Variable str vorhanden und vom Typ String ist.

3: Wenn Variable typ vom Typ nicht Zahl ist, setze sie auf Standardwert 2.

4: Stelle sicher, dass die Variable typ eine Ganzzahl zwischen 0 und 3 ist.

5: Definiere kombiniertes Suchmuster- und Ersetzungs-Array html.

6: Fülle das Array html mit den ersten drei Suchmustern (Schlüssel) und Ersetzungszeichenfolgen (Wert).

7: Wenn typ den Wert 1 oder 3 hat, füge ein weiteres Element (Ersetzung für einfache Anführungszeichen) in das Array html ein.

8: Wenn typ den Wert 2 oder 3 hat, füge ein weiteres Element (Ersetzung für doppelte Anführungszeichen) in das Array html ein.

9: Evaluiere über die Schleifendurchläufe für jedes Element im Array html und ersetze in str mit Hilfe eines regulären Ausdruck das aktuelle Suchmuster (Schlüssel) durch die aktuelle Ersatzzeichenfolge (Wert).

10-23: Definiere Suchmuster- und Ersetzungs-Array entity für die Zeichen des erweiterten ISO-8859-1 Zeichensatz.

24: Evaluiere über die Schleifendurchläufe für jedes Element im Array entity und ersetze in str mit Hilfe eines regulären Ausdruck das aktuelle Suchmuster (Zeichen mit dem Bytecode des Schlüssel + 160) durch die aktuelle Ersatzzeichenfolge (Wert).

25: Gibt den String str zurück.

Gestestet mit:

Netscape Navigator 6.2
Microsoft Internet Explorer 5.0 , 5.5 und 6.0
Mozilla Firefox 1.0 und 1.5

Anmerkungen:

Mit dem optionalen Parameter typ steuern Sie - wie in der originalen PHP-Funktion - die Maskierung von einfachen und doppelten Anführungszeichen. Dabei sind folgende Werte definiert:

0 = Keine Anführungszeichen umwandeln
1 = Nur einfache Anführungszeichen umwandeln
2 = Nur doppelte Anführungszeichen umwandeln (Standardeinstellung)
3 = Beide Arten (einfache und doppelte Anführungszeichen) umwandeln

▲ top

Bewertungen

Zu diesem Script liegen leider noch keine Bewertungen vor. Vielleicht möchten ja Sie der Erste sein, der eine Bewertung oder einen Kommentar hierzu abgibt. Also, worauf warten Sie noch?

► Bewertung für dieses Script schreiben.

▲ top

Feedback erwünscht

Haben Ihnen diese Informationen weitergeholfen oder haben Sie an dieser Stelle etwas anderes erwartet?
Mit Ihrem Feedback können Sie helfen, die Qualität der infocamp.de Inhalte zu verbessern.

► Kontakt-Formular

▲ top

JS JavaScript & JScripthtmlentities() Funktion ( Stringoperationen )

HTML-Tags und Sonderzeichen maskieren

Quelltext mit Erläuterungen

htmlentities()

Bewertungen

Feedback erwünscht

JS JavaScript & JScript
htmlentities() Funktion ( Stringoperationen )