---
title: encodeURIComponent()
slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
tags:
  - JavaScript
  - URI
translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
---
<div>{{jsSidebar("Objects")}}</div>

<p>Die Methode <strong><code>encodeURIComponent()</code></strong> kodiert eine Komponente des Uniform Resource Identifier (URI) indem jedes Vorkommen bestimmter Zeichen durch ein, zwei, drei oder vier Escape-Sequenzen ersetzt werden, die der UTF8-Kodierung des Zeichens entsprechen. Vier Escape-Sequenzen werden nur bei Zeichen bestehend aus zwei "Surrogate"-Zeichen verwendet.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">encodeURIComponent(str);</pre>

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt><code>str</code></dt>
 <dd>String. Eine URI-Komponente.</dd>
</dl>

<h2 id="Beschreibung">Beschreibung</h2>

<p><code>encodeURIComponent</code> kodiert alle Zeichen außer den Folgenden: alphabetische, dezimale Ziffern, <code>- _ . ! ~ * ' ( )</code></p>

<p>Beachte, dass {{jsxref("URIError")}} beim Versuch geworfen wird, ein Surrogate-Zeichen zu kodieren, das nicht Teil eines High-Low-Paares ist, z.B.:</p>

<pre class="brush: js">// Zulässiges High-Low-Paar
console.log(encodeURIComponent('\uD800\uDFFF'));

// alleinstehendes High-Surrogate-Zeichen wirft "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uD800'));

// alleinstehendes Low-Surrogate-Zeichen wirft "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uDFFF'));
</pre>

<p>Um unerwartete Anfragen an den Server zu vermeiden, sollte <code>encodeURIComponent</code> für jeden benutzerdefinierten Parameter, der als Teil der URI übergeben wird, verwendet werden. Z.B. könnte ein Benutzer in einem variablen Kommentar "<code>Thyme &amp;time=again</code>" schreiben. Ohne Verwendung von <code>encodeURIComponent</code> erhältst Du <code>comment=Thyme%20&amp;time=again</code>. Beachte, dass das Kaufmännische Und (Ampersand) und das Gleich-Zeichen ein neues Schlüssel-Wert-Paar bedeuten. Das bedeutet, dass statt dem POST-Schlüssel "<code>Thyme &amp;time=again</code>" zwei POST-Schlüssel verwendet werden, der eine mit dem Wert "<code>Thyme </code>", der andere (<code>time</code>) mit <code>again</code>.</p>

<p>Bei <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> werden Leerzeichen mit '+' ersetzt, so dass es u.U. erwünscht ist, nach der Ersetzung durch <code>encodeURIComponent</code> eine weitere Ersetzung von "%20" mit "+" durchzuführen.</p>

<p>Um streng konform mit <a href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> zu sein (welches !, ', (, ) und * reserviert), obwohl diese Zeichen keine formalisierten Trennzeichen sind, kann das Folgende sicher verwendet werden:</p>

<pre class="brush: js">function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}
</pre>

<h2 id="Beispiele">Beispiele</h2>

<p>Das folgende Beispiel stellt die spezielle Kodierung sicher, die in UTF-8-kodierten Parameterwerten der Server-Antwort-Headern <code>Content-Disposition</code> und <code>Link</code> benötigt wird (z.B. UTF-8-kodierte Dateinamen):</p>

<pre class="brush: js">var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''"
             + encodeRFC5987ValueChars(fileName);

console.log(header);
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Beachte, dass obwohl RFC3986 "!" reserviert, es nicht kodiert
        // werden muss, weil RFC5987 es nicht reserviert.
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // Die folgenden Zeichen müssen nicht nach RFC5987 kodiert werden,
            // daher können wir bessere Lesbarkeit übers Netzwerk sicherstellen:
            // |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome für Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Weitere_Infos">Weitere Infos</h2>

<ul>
 <li>{{jsxref("decodeURI")}}</li>
 <li>{{jsxref("encodeURI")}}</li>
 <li>{{jsxref("decodeURIComponent")}}</li>
</ul>