How to distinguish escape, encodeURI and encodeURIComponent

1. Preface

There are too many articles talking about the differences between these three methods, but most of them are very convoluted. This article attempts to explain these three methods from a practical perspective.

2. Escape and they are not of the same category

Simply speaking, escape encodes a string (while the other two encode URLs). The purpose is to make them readable on all computers.
The result after encoding is in the form of %XX or %uXXXX.
Among themASCII letters, numbers, @*/+, these characterswill notbe encoded, the rest will.
The most important thing is that when you need to encode the URL, please forget this method. This method is used for strings, not for URLs.
In fact, I have not used this method in actual work, so I won’t go into details.

3. The most commonly used encodeURI and encodeURIComponent

Encoding URLs is a common thing, so these two methods should be paid special attention to in practice.

They are all encoded URLs. The only difference is the encoded character range. Among them, the

encodeURI methodwill notencode the following charactersASCII letters, numbers, ~!@#$&*()=:/,;?+'

encodeURIComponent methodwill notfor the following characters EncodingASCII letters, numbers, ~!*()'

So encodeURIComponent has a wider encoding range than encodeURI.

As a practical example, encodeURIComponent will encode http:// into http%3A%2F%2F but encodeURI will not.

4. The most important thing is, what method should I use in what situation?

The difference is very clear. Let’s talk about it from actual examples. Bundle.

#1. If it is just an encoded string and has nothing to do with the URL, then use escape.

2. If you need to encode the entire URL and then use this URL, use encodeURI.

For example,

encodeURI("http://www.cnblogs.com/season-huang/some other thing");

will become

"http://www.cnblogs.com/season-huang/some%20other%20thing";

after encoding. Among them, spaces are encoded into %20 . But if you use encodeURIComponent, the result becomes

"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

Do you see the difference? Even "/" is encoded, and the entire URL is no longer usable.

3. When you need to encode parameters in the URL, encodeURIComponent is the best way.

var param = "http://www.cnblogs.com/season-huang/"; //param为参数param = encodeURIComponent(param);var url = "http://www.cnblogs.com?next=" + param; console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

I saw it, the "/" in the parameter can be encoded. If you use encodeURI, there will definitely be a problem, because the following / needs to be encoded.

The above is the detailed content of How to distinguish escape, encodeURI and encodeURIComponent. For more information, please follow other related articles on the PHP Chinese website!