Revision 26188 of encodeURIComponent()

  • Revision slug: JavaScript/Reference/Global_Objects/encodeURIComponent
  • Revision title: encodeURIComponent
  • Revision id: 26188
  • Created:
  • Creator: axcte
  • Is current revision? No
  • Comment one or more formatting changes
Tags: 

Revision Content

 

Summary

Core Function

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).

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, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
                                 replace(/\)/g, '%29').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" } ) }}

Revision Source

<p> </p>
<h3 name="Summary">Summary</h3>
<p><strong>Core Function</strong></p>
<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>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">var encoded = encodeURIComponent(<em>str</em>);
</pre>
<h3 name="Parameters">Parameters</h3>
<dl> <dt><code>str</code> </dt> <dd>A component of a URI.</dd>
</dl>
<h3 name="Description">Description</h3>
<p><code>encodeURIComponent</code> escapes all characters except the following: alphabetic, decimal digits, <code>- _ . ! ~ * ' ( )</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  (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://labs.apache.org/webarch/uri/rfc/rfc3986.html" 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, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
                                 replace(/\)/g, '%29').replace(/\*/g, '%2A');
}
</pre>
<h3 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" } ) }}</p>
Revert to this revision