Talk about the differences and applications of encodeURI, encodeURIComponent and escape

Talk about the differences and applications of encodeURI, encodeURIComponent and escape_javascript skills

WBOY

Release： 2016-05-16 15:30:06

Original

1580 people have browsed it

First of all, we all know that these three things are used for encoding. Let’s talk about encodeURI() and encodeURIComponent(). These two are used for encoding and decoding when converting URLs.

If there is encoding, there will be decoding. Decoding is decodeURI() and decodeURIComponent(). Their usage is very simple. Just bring the text to be transcoded into the parameters to achieve the purpose

For example:

encodeURI("I am the text to be encoded")
decodeURI("I am the text to be decoded")
encodeURIComponent("I am the text to be encoded")
decodeURIComponent("I am the text to be decoded")

The difference between encodeURI() and encodeURIComponent() is actually not big

The main difference is:

encodeURI has 82 non-encoded characters: !, #, $, &, ', (,), *, ,,, -,.,/,:,;,=,?,@,_,~, 0-9, a-z, A-Z

encodeURIComponent has 71 unencoded characters: !, ', (,), *, -, ., _, ~, 0-9, a-z, A-Z

encodeURI is mainly used when assigning value directly to the address bar:

location.href=encodeURI("http://www.cnblogs.com/Tezml/");

And encodeURIComponent is mainly used for query parameters of url:

location.href="http://www.cnblogs.com/Tezml/test.php?a=" encodeURIComponent("I am who I am");

And escape, compared to the above two, is different

escape() is encoding, unescape() is decoding;

escape method

Encode String objects so that they are readable on all computers,

escape(charString)

The required charstring parameter is any String object or literal to be encoded.

Description

The escape method returns a string value (Unicode format) containing the contents of charstring. All spaces, punctuation, accents, and other non-ASCII characters are replaced with %xx encoding,

Where xx is equal to the hexadecimal number representing the character. For example, spaces are returned as " ".

Character values greater than 255 are stored in %uxxxx format.

There are 69 characters that are not encoded by escape: *, ,-,.,/,@,_,0-9,a-z,A-Z

Note that the escape method cannot be used to encode Uniform Resource Identifiers (URIs). It should be encoded using the encodeURI and encodeURIComponent methods.

The last demo about encoding and decoding

<!DOCTYPE html>
<html>
 <head>
 <title>Tezml_编码解码测试</title>
 <meta charset="utf-8">
 <meta name="author" content="Tezml" />
 <meta name="copyright" content="Tezml" />
 <meta name="description" content="Tezml" />
 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="wz1"></div>
<div id="wz2"></div>
<div id="wz3"></div>
<div id="wz4"></div>
<div id="wz5"></div>
<div id="wz6"></div>
<div id="wz7"></div>
<div id="wz8"></div>
<div id="wz9"></div>
<div id="wz10"></div>
<div id="wz11"></div>
<div id="wz12"></div>
</body>
<script type="text/javascript">
var chinese="请叫我中文"
var english="place tall me englash"
var Monster=":#&$/@"
$("#wz1").html(encodeURI(chinese))//编码 %E8%AF%B7%E5%8F%AB%E6%88%91%E4%B8%AD%E6%96%87
$("#wz2").html(decodeURI(chinese))//解码 请叫我中文
$("#wz3").html(encodeURI(english))//编码 place%20tall%20me%20englash
$("#wz4").html(decodeURI(english))//解码 place tall me englash
$("#wz5").html(encodeURIComponent(Monster))//编码 %3A%23%26%24%2F%40
$("#wz6").html(encodeURI(Monster))//编码 :#&$/@
$("#wz7").html(escape(chinese))//编码 %u8BF7%u53EB%u6211%u4E2D%u6587
$("#wz8").html(escape(english))//编码 place%20tall%20me%20englash
$("#wz9").html(escape(Monster))//编码 %3A%23%26%24/@
$("#wz10").html(unescape(chinese))//编码 请叫我中文
$("#wz11").html(unescape(english))//编码 place tall me englash
$("#wz12").html(unescape(Monster))//编码 :#&$/@
</script>
</html>

Copy after login

Summary

escape() cannot be used directly for URL encoding. Its real function is to return the Unicode encoding value of a character. For example, the return result of "Spring Festival" is %u6625%u8282, and escape() is incorrect. "" encoding is mainly used for Chinese character encoding, and its use is no longer recommended.

encodeURI() is the function in Javascript that is actually used to encode URLs. The entire url address is encoded, but the symbols with special meanings "; / ? : @ & = $ , #" are not encoded. The corresponding decoding function is: decodeURI().

encodeURIComponent() can encode the special characters "; / ? : @ & = $ , #". The corresponding decoding function is decodeURIComponent().

If you want to pass the URL with the ampersand, use encodeURIComponent()