encodeURIComponent()

  • Revision slug: JavaScript/Reference/Global_Objects/encodeURIComponent
  • Revision title: encodeURIComponent
  • Revision id: 317397
  • Created:
  • Creator: rodneyrehm
  • Is current revision? No
  • Comment escape("*") === "*" in Firefox 16 and Chrome 22, the link to RFC3986 lead nowhere

Revision Content

Summary

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

Core Global Method
Implemented in JavaScript ?
ECMAScript Edition ECMAScript ?

Syntax

var encoded = encodeURIComponent(str);

Parameters

str
A component of a URI.

Description

encodeURIComponent escapes all characters except the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )

To avoid unexpected requests to the server, you should call encodeURIComponent on any user-entered parameters that will be passed as part of a URI. For example, a user could type "Thyme &time=again" for a variable comment. Not using encodeURIComponent on this variable will give comment=Thyme%20&time=again. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST comment key equal to "Thyme &time=again", you have two POST keys, one equal to "Thyme " and another (time) equal to again.

For application/x-www-form-urlencoded  (POST), per http://www.w3.org/TR/html401/interac...m-content-type, spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".

If one wishes to be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

See also

decodeURI, decodeURIComponent, encodeURI

{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions_globales/encodeURIComponent", "ja": "ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Funkcje/encodeURIComponent" ,"zh-cn":"zh-cn/JavaScript/Reference/Global_Objects/encodeURIComponent"} ) }}

Revision Source

<h3 id="Summary">Summary</h3>
<p>Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
<table class="standard-table">
  <thead>
    <tr>
      <th class="header" colspan="2">Core Global Method</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Implemented in</td>
      <td>JavaScript ?</td>
    </tr>
    <tr>
      <td>ECMAScript Edition</td>
      <td>ECMAScript ?</td>
    </tr>
  </tbody>
</table>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">
var encoded = encodeURIComponent(<em>str</em>);
</pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
  <dt>
    <code>str</code></dt>
  <dd>
    A component of a URI.</dd>
</dl>
<h3 id="Description" name="Description">Description</h3>
<p><code>encodeURIComponent</code> escapes all characters except the following: alphabetic, decimal digits, <code>- _ .&nbsp;! ~ * ' ( )</code></p>
<p>To avoid unexpected requests to the server, you should call <code>encodeURIComponent</code> on any user-entered parameters that will be passed as part of a URI. For example, a user could type "<code>Thyme &amp;time=again</code>" for a variable <code>comment</code>. Not using <code>encodeURIComponent</code> on this variable will give <code>comment=Thyme%20&amp;time=again</code>. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST <code>comment</code> key equal to "<code>Thyme &amp;time=again</code>", you have two POST keys, one equal to "<code>Thyme </code>" and another (<code>time</code>) equal to <code>again</code>.</p>
<p>For application/x-www-form-urlencoded&nbsp; (POST), per <a class="external" href="http://www.w3.org/TR/html401/interact/forms.html#form-content-type" rel="freelink">http://www.w3.org/TR/html401/interac...m-content-type</a>, spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".</p>
<p>If one wishes to be more stringent in adhering to <a class="external" href="http://tools.ietf.org/html/rfc3986" title="http://labs.apache.org/webarch/uri/rfc/rfc3986.html">RFC 3986</a> (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:</p>
<pre class="brush: js">
function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}
</pre>
<h3 id="See_also" name="See_also">See also</h3>
<p><a href="/en/JavaScript/Reference/Global_Objects/decodeURI" title="en/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a>, <a href="/en/JavaScript/Reference/Global_Objects/decodeURIComponent" title="en/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a>, <a href="/en/JavaScript/Reference/Global_Objects/encodeURI" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURI">encodeURI</a></p>
<p>{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions_globales/encodeURIComponent", "ja": "ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Funkcje/encodeURIComponent" ,"zh-cn":"zh-cn/JavaScript/Reference/Global_Objects/encodeURIComponent"} ) }}</p>
Revert to this revision