Summary of three ways to encode and decode url by js

The first type: escape and unescape

escape() cannot be used directly for URL encoding, its real function is to return a character's Unicode encoded value.

Its specific rule is to encode all other characters except ASCII letters, numbers, and punctuation marks "@ * _ + - . /". The symbols between u0000 and u00ff are converted into the form of %xx, and the rest are converted into the form of %uxxxx. The corresponding decoding function is unescape().

There are two more points to note:

1. First of all, no matter what the original encoding of the web page is, once encoded by Javascript, it becomes a unicode character. In other words, the input and output of Javascipt functions are all Unicode characters by default. This also applies to the following two functions.
2. Secondly, escape() is not encoding "+". But we know that if there are spaces on the web page when submitting the form, it will be converted into + characters. When the server processes data, the + sign will be processed into spaces. Therefore, be careful when using it.

escape()coding：
 
const time = 2022-01-09
const tile = '63 Yuan brown sugar granules solid drink'
let url = "http://localhost:8080/?time="+escape(time)+"&title="+escape(tile)
The address bar displays the results：
    "http://localhost:8080/?time=2022-01-09&title=63%u5143%u9ED1%u7CD6%u9897%u7C92%u56FA%u996E"

unescape（）decoding：
 
let url = "http://localhost:8080/?time="+unescape(2022-01-09)+"&title="+unescape(63%u5143%u9ED1%u7CD6%u9897%u7C92%u56FA%u996E)
The address bar displays the results：
   "http://localhost:8080/?time=2022-01-09&title=63Yuan brown sugar granules solid drink"

The second type: encodeURI and decodeURI

encodeURI() is a function that is really used to encode URLs in Javascript.

It is used to individually encode components of URLs. In addition to common symbols, it does not encode other symbols that have special meanings in URLs, except for common symbols. After encoding, it outputs the utf-8 form of the symbol, prefixes % byte, and then encodes the generated 1 byte, 2 byte, or 4 byte characters with a hexadecimal escape sequence (form %xx).
Its corresponding decoding function is decodeURI()

It should be noted that it does not encode single quotes.

let url = "http://localhost:8080/?time=2022-01-09&title=63 yuan brown sugar granules solid drink" 
encodeURI（）coding：
let encodeURI_url = encodeURI(url) = "http://localhost:8080/?time=2022-01-09&title=63%E5%85%83%E9%BB%91%E7%B3%96%E9%A2%97%E7%B2%92%E5%9B%BA%E9%A5%AE"
 
decodeURI（）decoding：
decodeURI（encodeURI_url ）= “http://localhost:8080/?time=2022-01-09&title=63Yuan brown sugar granules solid drink”

The third type: encodeURIComponent and decodeURIComponent

The difference from encodeURI() is that it is used to encode the entire URL. "; / ? : @ & = + $ , #", these symbols that are not encoded in encodeURI() will all be encoded in encodeURIComponent().

Its corresponding decoding function is decodeURIComponent().

let url = "http://localhost:8080/?time=2022-01-09&title=63 yuan brown sugar granules solid drink" 
encodeURIComponent （）coding：
let encodeURIComponent _url = encodeURIComponent (url) = http%3A%2F%2Flocalhost%3A8080%%3Ftime%3D2022-01-09%26title%3D63%E5%85%83%E9%BB%91%E7%B3%96%E9%A2%97%E7%B2%92%E5%9B%BA%E9%A5%AE
 
decodeURIComponent（）decoding：
decodeURIComponent（encodeURIComponent _url ）= “http://localhost:8080/?time=2022-01-09&title=63Yuan brown sugar granules solid drink”

Summarize

This is the end of this article about three ways to encode and decode url by js. For more related content on url encoding and decoding, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!