Quelltext der Seite Wikipedia:Technik/Skin/JS/Encoding

{{../../../!header
|Text=Encoding für JavaScript}}
Diese Seite gibt Möglichkeiten an, wie im [[JavaScript]]-Code für Wiki-Projekte das [[URL-Encoding]] umgesetzt werden kann, also das Verbergen von Sonderzeichen sowie Schriftzeichen außerhalb des [[American Standard Code for Information Interchange|ASCII]]-Zeichensatzes. Neben der Hauptanwendung bei der Bildung von [[Uniform Resource Locator|URL]] gibt es auch andere Situationen, für die die Methoden genauso verwendet werden können und müssen. Das Verbergen der Zeichen wird auch als Maskieren oder Kodieren bezeichnet.

__TOC__

== Situation und Sonderzeichen ==
Es gibt unterschiedliche Anforderungen an das Resultat des Vorgangs. Abhängig davon kommen unterschiedliche Funktionen in Frage; möglicherweise muss mit einem kleinen Eingriff nachgesteuert werden.

* Sicherheit gegen böswillig untergeschobenen [[Schadprogramm|Schadcode]].
** Zu maskieren sind in URL vor allem: <code>' "</code> und bei erhöhten Anforderungen auch <code>(&nbsp;)</code>.
** Bei generiertem HTML auch <code>&lt; ></code>.
* Funktionstüchtigkeit von URL, die freie Daten transportieren sollen.
** Insbesondere sind Leerzeichen, <code># %</code> und <code>&</code> hinderlich.
* Lesbarkeit der produzierten URL.
** Oft wird gewünscht, bei allen notwendigen Maskierungen von Zeichen die URL so lesbar wie möglich zu halten.

Zu beachten ist, dass auf der kodierenden Seite nicht jede Form der Dekodierung unterstützt werden muss.
* Wo Webserver angesteuert werden, sind sie nicht verpflichtet, jede Form der „Prozentkodierung“ zu verstehen. Soweit Software für Server nach 2000 geschrieben wurde, wird ein breites Spektrum beherrscht. Teilweise wird aber für die Dekodierung des [[Hypertext Transfer Protocol#HTTP GET|HTTP&nbsp;GET]] nur ein eingeschränktes Repertoire unterstützt. Hinzu kommt, dass vor 2000 geschriebene Server-Software möglicherweise nur knapp 200 [[ISO 8859-1|8-Bit-ANSI-Zeichen]] erwartet, während heute umfassende [[UTF-8]]-Zeichen üblich sind.
* Leerzeichen können auf drei verschiedene Arten kodiert sein:
*# Als Pluszeichen <code>+</code> im traditionellen Query-Format,
*# als <code>%20</code> bei der Prozentkodierung,
*# als <code>_</code> in der Wiki-Software.
* {{Anker|ANSI}} Zur Kodierung der ANSI-Zeichen von 160 bis 255 gibt es zwei verschiedene Techniken:
*# Als direkte Kodierung mit Prozentzeichen und zwei [[Oktett (Informatik)|Oktetts]].
*#* ü wird zu <code>%FC</code> (252<sub>10</sub>).
*# Als UTF-8-Kodierung.
*#* ü wird zu <code>%C3%BC</code>

== {{Anker|encode}} Funktionen zur Kodierung ==

{| class="wikitable"
! Funktion !! Herkunft !! kodierte Sonderzeichen !! Resultat !! Leerzeichen
|-
| <code>escape(s)</code>
| JavaScript&nbsp;1.0
| <code style="white-space:nowrap"><nowiki>! " # $ % & ' ( ) , : ; < = > ? [ \ ] ^ ` { | } ~</nowiki></code>
|style="padding-left:0.5em"| ANSI; <code>ü</code>→<code>%FC</code>
|rowspan="4" style="text-align: center"| <code>%20</code>
|-
| <code>encodeURI(s)</code>
|rowspan="2"| JavaScript&nbsp;1.5
| <code style="white-space:nowrap"><nowiki>" % < > [ \ ] ^ ` { | }</nowiki></code>
|rowspan="4" style="padding-left:0.5em; padding-right:0.5em;"| UTF-8; <code>ü</code>→<code>%C3%BC</code>
|-
| <code>encodeURIComponent(s)</code>
| <code style="white-space:nowrap"><nowiki>" # $ % & + , / : ; < = > ? @ [ \ ^ ` { | }</nowiki></code>
|-
| <code>[[Wikipedia:Technik/Skin/JS/mw#.util.rawurlencode()|mw.util.rawurlencode(s)]]</code>
|rowspan="2"| <code>[[Wikipedia:Technik/Skin/JS/mw|mediawiki.util]]</code>
| <code style="white-space:nowrap"><nowiki>! " # $ % & ' ( ) * + , / : ; < = > ? @ [ \ ] ^ ` { | } ~</nowiki></code>
|-
| <code>[[Wikipedia:Technik/Skin/JS/mw#.util.wikiUrlencode()|mw.util.wikiUrlencode(s)]]</code><br />
<code>[[Wikipedia:Technik/Skin/JS/mw#.util.getUrl()|mw.util.getUrl(s)]]</code>
| <code style="white-space:nowrap"><nowiki>" # % & ' + < = > ? [ \ ] ^ ` { | }</nowiki></code>
|style="text-align: center"| <code>_</code>
|-
| <code>s.replace(re,ex)</code>
| JavaScript&nbsp;1.2
|colspan="3"| ''beliebig;'' <code>re</code>=[[Regulärer Ausdruck]], <code>ex</code>=Austausch
|-
| <code>[[Wikipedia:Technik/Skin/JS/mw#.html.escape()|mw.html.escape(s)]]</code>
| <code>[[Wikipedia:Technik/Skin/JS/mw|mediawiki.html]]</code>
| <code style="white-space:nowrap"><nowiki>< > ' & "</nowiki></code>
|colspan="2"| [[Entitäten in Auszeichnungssprachen|HTML-Entity]]
|-
| <code>[[Hilfe:Parserfunktionen/Seite und URL#urlencode|{&#123;urlencode:}}]]</code><br /> <code>{&#123;urlencode:&#124;QUERY}}</code>
|rowspan="4"| Wiki-Parser
| <code style="white-space:nowrap"><nowiki>! " # $ % & ' ( ) * + , / : ; < = > ? @ [ \ ^ ` { } ~</nowiki></code>
|rowspan="3"| UTF-8; <code>ü</code>→<code>%C3%BC</code>
|style="text-align: center"| <code>+</code>
|-
| <code>{&#123;urlencode:&#124;PATH}}</code>
| <code style="white-space:nowrap"><nowiki>! " # $ % & ' ( ) * + , / : ; < = > ? @ [ \ ^ ` { }</nowiki></code>
|style="text-align: center"| <code>%20</code>
|-
| <code>{&#123;urlencode:&#124;WIKI}}</code>
| <code style="white-space:nowrap"><nowiki>" # % & ' + < = > ? [ \ ^ ` {  } ~</nowiki></code>
|style="text-align: center"| <code>_</code>
|-
| <code>[[Hilfe:Parserfunktionen/Seite und URL#anchorencode|{&#123;anchorencode:}}]]</code>
| <code style="white-space:nowrap"><nowiki>! " # $ % & ' ( ) * + , / ; < = > ? @ [ \ ^ ` { } ~</nowiki></code>
| ''historisch:''<br /> UTF-8; <code>ü</code>→<code>.C3.BC</code>
|style="text-align: center"| <code>_</code>
|}

Dabei steht <code>s</code> jeweils für die Ausgangs-Zeichenkette; das Ergebnis der Funktion ist jeweils die transformierte Zeichenkette.

Individuell lässt sich jedes einzelne Zeichen wie folgt umkodieren; hier die Umwandlung aller Leerzeichen in Unterstreichungsstriche:
* <syntaxhighlight lang="javascript" inline>s.replace( / /g, '_' )</syntaxhighlight>

== {{Anker|decode}} Funktionen zur Dekodierung ==
{| class="wikitable"
! Funktion !! Herkunft !! Gegenstück !! Bemerkung
|-
| <code>unescape(s)</code>
| JavaScript&nbsp;1.0
| Nur <code>escape(s)</code>
| Kein UTF-8
|-
| <code>decodeURI(s)</code>
| JavaScript&nbsp;1.5
| <code>encodeURI(s)</code>
|rowspan="2"| Oft kein ANSI
|-
| <code>decodeURIComponent(s)</code>
| JavaScript&nbsp;1.5
| <code>encodeURIComponent(s)</code>
|-
| <code>[[Wikipedia:Technik/Skin/JS/mw#.Title.getFragment()|mw.Title.getFragment(s)]]</code>
| <code>[[Wikipedia:Technik/Skin/JS/mw#.Title|mw.Title]]</code>
| 
| <code>.3C</code> → <code>&lt;</code>
|-
| <code>s.replace(re,ex)</code>
| JavaScript&nbsp;1.2
|colspan="2"| ''beliebig;'' <code>re</code>=[[Regulärer Ausdruck]], <code>ex</code>=Austausch
|}

Im Regelfall sollten diese Funktionen kein Pluszeichen in ein Leerzeichen umwandeln, weil das Gegenstück dies bei der Kodierung auch nicht macht.

Die Funktionen mit ''decodeURI'' können meist sämtliche Prozentkodierungen in einfache Zeichen zurückwandeln, sofern es sich um UTF-8 handelt. ANSI-Kodierungen statt UTF-8 führen mitunter dazu, dass nicht nur nicht dekodiert wird, sondern die Funktion und dann das ganze Skript abstürzt.

Bei einer unbekannt vorgefundenen URL weiß man nicht, welches Kodierungsverfahren angewendet wurde. Dann sollte sicherheitshalber die folgende Konstruktion benutzt werden:
<syntaxhighlight lang="javascript">
try {
   s  =  decodeURIComponent(u);
} catch (e) {
   s  =  unescape(u);
}
</syntaxhighlight>
Falls der erste Versuch („try“) einen fatalen Fehler auslöst, wird nicht gleich die gesamte Skript-Ausführung beendet, sondern es wird bei <code>catch</code> weiter ausgeführt. Für <code>unescape()</code> gibt es dann keine unzulässigen Kombinationen, und es ist kein Absturz zu befürchten.

Die Dekodier-Funktionen können unterschiedlich intelligent ausfallen. In den meisten Fällen ist es von der Logik her unterscheidbar. Hat das erste Oktett-Zeichen einen Wert von 160 bis 191, muss es als ANSI kodiert sein. Liegt es zwischen 192 und 255, dann wäre es UTF-8, falls das folgende Zeichen auch Prozent-kodiert ist, und ANSI, wenn das nicht der Fall ist. Pfiffige Funktionen könnten also auch universell dekodieren.

Individuell kann man hier wieder jedes einzelne Oktett oder Zeichen selbst umkodieren; hier beispielsweise die Rücktransformation aller Leerzeichen nach verschiedenen Methoden (die sich auch in einem einzigen regulären Ausdruck zusammenfassen ließen):
<syntaxhighlight lang="javascript">
s  =  u.replace( /%20/g, ' ' ).replace( /_/g, ' ' ).replace( /\+/g, ' ' );
</syntaxhighlight>
<noinclude>
[[Kategorie:Wikipedia:Technik/Skin/JavaScript|Encoding]]
</noinclude>