An article to help you distinguish between encodeURI and encodeURIComponent

Helps you distinguish between encodeURI and encodeURIComponent usage scenarios

Background

Recently, while working on the preview feature in my company, I came across a scenario of encoding the request parameters. So the question arises.

Why is it necessary to encode a link or parameter?
When do I need to encode? What is the difference between * encodeURI and encodeURIComponent?

Let’s take a look at it together~

Why do you need to encode

Http protocol parameter transmission is “key=value” such key-value pairs, if you want to pass more than one parameter you need to use the “&” symbol to split the key-value pairs. For example, “?name1=value1&name2=value2”, so that when the server receives such a string, it will use “&” to split each parameter, and then use “=” to split the parameter value.

URLs are encoded using the ASCII character set, according to the RFC3986 “% encoding” specification: “&” is encoded as “26” and “=” is encoded as “3D”.

If the parameter value contains a special character like “=” or “&”, it will be ambiguous because URL encoding simply prefixes each byte of the special character with %, so URL encoding of the parameter is required.

If the parameter to be transmitted may contain special characters like “(! $&’()*+,;=)”, the encoding is required.

Here is a look at the two encoding methods described in the title.

We notice that both methods contain a URI, so what is the URI?

A Uniform Resource Identifier (URI) is a string that identifies the name of an Internet resource.

Every resource available on the Web - HTML documents, images, video clips, programs, etc. - is located by a Uniform Resource Identifier (URI for short).

encodeURI

Used to encode a complete URI, without encoding ASCII letters and numbers and punctuation in the URL.

! #$&’()*+,/:;=? @-. _~0-9a-zA-Z will not be encoded

Usage scenario :. Use this method for encoding when you need to get an available URL address.

Example.

1
2

encodeURI('http://xuedingmiao.com/My first/');
// http://xuedingmiao.com/My%20first/

encodeURIComponent

is a method for encoding components of a Uniform Resource Identifier (URI), literally URIComponent is a URL component, a component, so this method encodes the component rather than the whole.

The encodeURIComponent assumes that its arguments are part of a URI (such as a protocol, hostname, path, or query string) and that the symbols that are not encoded in the encodeURI “; / ? : @ & = + $ , #”, encodeURIComponent encodes them all.

!’ ()*-. _~0-9a-zA-Z will not be encoded

Usage scenario. Use encodeURIComponent when the parameters of a URL need to be encoded.