Three ways to encode and decode URLs using JS. How does JS pass parameters or special symbols in URLs?

Why url encoding?

What should you do when %2F appears in your URL? How does JS pass parameters or special symbols in url? How to solve the problem that we often encounter some special symbols such as %2F and %2B in URL links? Let's take a look:

  • According to the RFC standard, some symbols cannot be passed directly in the URI and must be encoded according to the prescribed format.
  • Encoding format: % plus the ASCII code of the character, that is, a percent sign %, followed by the ASCII (hexadecimal) code value of the corresponding character. For example: the encoding value of a space is "%20".

URL special symbols and encoding.

 + URL 中+号表示空格 %2B
 空格 URL中的空格可以用+号或者编码 %20
 / 分隔目录和子目录 %2F
 ? 分隔实际的 URL 和参数 %3F
 % 指定特殊字符 %25
 # 表示书签 %23
 & URL 中指定的参数间的分隔符 %26
 = URL 中指定参数的值 %3D

How to encode and decode url?

1. escape and unescape (less commonly used)

Precautions

Special note: There are 69 characters that escape does not encode: *, +, -, ., /, @, _, 0-9, a-z, A-Z.

Introduction to use
  • escape() cannot be used directly for URL encoding. Its real function is to return the Unicode encoding value of a character.
  • The escape() function is used by js to encode strings
  • Use the unicode character set to encode the specified string except 0-255.
  • All spaces, punctuation marks, special characters and more related non-ASCII characters will be converted into character encoding in %xx format (xx is equal to the hexadecimal number of the character's encoding in the character set table).
  • For example, the encoding corresponding to the space character is %20.
Use Cases
var url = "http://localhost:8080/xiaojin?state=11&name=xiaojin&other=开心";
escape(url)
'http%3A//localhost%3A8080/xiaojin%3Fstate%3D11%26name%3Dxiaojin%26other%3D%u5F00%u5FC3'

2. encodeURI and decodeURI (less commonly used)

Precautions

==Special Notes: There are 82 characters that encodeURI does not encode:!, #, $, &, ', (,), *, +,,,-,.,/,:,;,=, ?, @, _, ~, 0-9, a-z, A-Z ==

Introduction to use

Convert URI strings into various escape strings using UTF-8 encoding format.
encodeURI() is generally used to encode the entire url

Use Cases
var url = "http://localhost:8080/xiaojin?state=11&name=xiaojin&other=开心";
encodeURI(url)
'http://localhost:8080/xiaojin?state=11&name=xiaojin&other=%E5%BC%80%E5%BF%83'

3. encodeURIComponent and decodeURIComponent (commonly used)

Precautions

==Special Notes: This is easier to use, because "; / ? : @ & = + $ , #" will all be encoded. ==

Introduction to use
  • I usually use this for parameter passing
  • It is used to encode components of a URL individually rather than encoding the entire URL.
  • Use UTF-8 encoding format to convert into escape format string.
  • Parameters containing special characters may cause breaks.
Use Cases
var url = "http://localhost:8080/xiaojin?state=11&name=xiaojin&other=开心";
encodeURIComponent(url)
'http%3A%2F%2Flocalhost%3A8080%2Fxiaojin%3Fstate%3D11%26name%3Dxiaojin%26other%3D%E5%BC%80%E5%BF%83'
That’s all for today~
  • Friends, ( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝSee you tomorrow~~
  • Everyone, please be happy every day

Everyone is welcome to point out areas that need correction in the article~
There is no end to learning and win-win cooperation

Insert image description here

Welcome the brothers and sisters passing by to give better opinions~~

Guess you like

Origin blog.csdn.net/tangdou369098655/article/details/133821323