Murphy's World @ home

server holyghost alias dyndns.murphys-world.de

JavaScript Tipps & Tricks
String-Funktion htmlspecialchars()

Beschreibung:

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 Anzeigefehler die Folge sind.

Neben diesem eher kosmetischen Problem besteht speziell bei Daten aus externen oder unbekannten Quellen auch immer die Gefahr eines Code Injection Angriffs, bei dem bösartiger Fremdcode in die eigene Seite eingeschleust wird. Eine 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.

Es gibt insgesamt vier HTML-eigene Zeichen, welche für die Auszeichnung von HTML Befehlen reserviert sind und daher immer maskiert d.h. in ihre jeweiligen Ersatzzeichenfolgen umgewandelt werden müssen, wenn sie im anzuzeigenden Text Verwendung finden sollen. Diese Zeichen sind:

< (Kleiner-Zeichen) wird ersetzt durch < (less then)

> (Größer-Zeichen) wird ersetzt durch > (greater then)

& (Kaufmanns-Und) wird ersetzt durch & (ampersand)

" (Doppelte Anführungszeichen) wird ersetzt durch " (quotation mark)

Die Funktion erwartet einen oder zwei Parameter. Der erste Parameter enthält den zu maskierenden String. Mit dem optionalen zweiten Parameter steuert man - 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

Nachfolgend finden sich zwei Varianten der Funktion htmlspecialchars() für JavaScript bzw. JScript, welche in Bedienung und Ergebnis ihrem PHP Vorbild entsprechen. Beide führen Ersetzungen mit regulären Ausdrücken durch, haben aber ein leicht unterschiedliches Datenhandling.

Um auch weitere Zeichen wie z.B. deutsche Umlaute zu ersetzen, ist die Funktion htmlentities() vorgesehen.

Syntax:

string htmlspecialchars ( string str , [integer typ] )

Übergabewerte:

str = der zu maskierende String

typ = Art der Maskierung (optional)

Quelltext:

ab JavaScript 1.2

function htmlspecialchars(str,typ) {
  if(typeof str=="undefined") str="";
  if(typeof typ!="number") typ=2;
  typ=Math.max(0,Math.min(3,parseInt(typ)));
  var from=new Array(/&/g,/</g,/>/g);
  var to=new Array("&amp;","&lt;","&gt;");
  if(typ==1 || typ==3) {from.push(/'/g); to.push("&#039;");}
  if(typ==2 || typ==3) {from.push(/"/g); to.push("&quot;");}
  for(var i in from) str=str.replace(from[i],to[i]);
  return str;
}

function htmlspecialchars(str,typ) {
  if(typeof str=="undefined") str="";
  if(typeof typ!="number") typ=2;
  typ=Math.max(0,Math.min(3,parseInt(typ)));
  var html=new Array();
  html[38]="amp"; html[60]="lt"; html[62]="gt";
  if(typ==1 || typ==3) html[39]="#039";
  if(typ==2 || typ==3) html[34]="quot";
  for(var i in html)
    eval("str=str.replace(/"+String.fromCharCode(i)+"/g,\"&"+html[i]+";\");");
  return str;
}

Beispiel:

Eingabe

<script type="text/javascript">
text = "<b>Hallo<br />Welt</b>";
chars = "< > & \" '";
document.writeln ( text + "<br />" + htmlspecialchars ( text ) );
alert (
  htmlspecialchars ( chars, 0 ) + "\n" +
  htmlspecialchars ( chars, 1 ) + "\n" +
  htmlspecialchars ( chars, 2 ) + "\n" +
  htmlspecialchars ( chars, 3 )
);
</script>

Ausgabe

Hallo
Welt
<b>Hallo<br />Welt</b>

&lt; &gt; &amp; " '
&lt; &gt; &amp; " &#039;
&lt; &gt; &amp; &quot; '
&lt; &gt; &amp; &quot; &#039;

Lizenzbestimmungen:

Das auf dieser Seite notierte Script htmlspecialchars() ist Public Domain.

Zurück zur JavaScript Funktionsübersicht