Understanding How Spaces Are Encoded: %with encodeURI vs. with URL

You can encode a query string either using either encodeURI or URL. Recently, I noticed that URL encodes spaces differently. I will dicuss why they handle encoding in distinct ways. Before diving into the topic, I will show you how to encode using each method.

---

Usage

1. encodeURI

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

You can encode a URI using the encodeURI function. However,. it doesn't encode a part of characters that are valid parts of a URI, so that you might need to use the encodeURIComponent function to properly encode query strings or the other components in the URI.

For example, let's say you have a query string q with the value
https://www.google.com/search?q=what is the meaning of &?.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

The &(ampersand) is not converted to & as it should be. Because &(ampersand) can be a valid part of the URI. For this reason, it's always safer to use encodeURIComponent for query strings.

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

Since encodeURIX and related functions treat URI as string, you must handle special characters like ? and & yourself. Alternatively, you can simplify the process using the URL.

---

2. URL

When using URL to encode, you need to separately handle the base URL and the query string.

const url = 'https://www.google.com/search?q=programming language';
// 'https://www.google.com/search?q=programming language'
url.toString();

If you encode everything at once using the URL constructor, as shown in the example above, the query sring might not be encoded properly.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'programming language');
// 'https://www.google.com/search?q=programming+language'
url.toString();

By setting the query string via searchParams property of the URL object, you can set the query string.

In this case, the space is converted to . Before explaining why this happens, let's test it with another query string to see how it handles other special characters.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'what is the meaning of &?');
// 'https://www.google.com/search?q=what+is+the+meaning+of+%26%3F'
url.toString();

Other special characters are encoded as expected.

Now, let's dive into why these differences happen.

---

Encoding

1. encodeURI

The encodeURIX functions encode according to RFC2396. A URI is not just a location on the internet; it can refer to any type of resource. This is why it is called URI(Uniform Resource Identifier) rather than URL(Uniform Resource Locator).

---

2. URL

The URL API encodes according to RFC3986, which is a more recent URI specification.

If you need to achieve this behavior with encodeURI, refer to this. - encodeURIComponent encoding for RF3986).

The URLSearchParams encodes following the rule of the percent encoding. According to the documentation, it replaces spaces with ' '.

While I couldn't find the specification in RFC for this behavior, MDN's encodeURIComponent documentation states:

For application/x-www-form-urlencoded, spaces are to be replaced by , so one may wish to follow a encodeURIComponent() replacement with an additional replacement of with .

This explains why spaces are replaced with ' ' in URLSearchParams, as it follows the application/x-www-form-urlencoded standard.

You may have noticed that URL and URLSearchParams follow a different RFCs.

Let's see some examples.

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

As shown, the URL does not encode brackets and colon, as they are part of the IPv6 address. However, the colon is not encoded as : even though it is a part of query string. It is different from the percent-encoding table.

It means you need to encode the URL and query string separately.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

Now, the URL and query string are encoded properly.

---

Conclusion

encodeURI, encodeURIComponent, URL, and URLSearchParams functions each serve a different purpose, and you should use them based on your specific needs.

encodeURI: Encodes a URI according to RFC2396. It does not encode characters that are valid parts of a URI. If you need to encode a URI according to RFC3986, refer to this MDN documentation.

encodeURIComponent: Encodes a component of a URI according to RFC2396, such as a path, fragment, or query string. It includes characters that are not encoded by encodeURI.

URL: Encodes a Web URL according to RFC3986.

URLSearchParams: Encode parameters according to the application/x-www-form-urlencoded standard.

If you need to replace the (plus) sign with , you can do so manually, as shown below:

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

When working with web development, Restful APIs, or web URLs, the URL is a reliable choice. Additionally, it follows RFC3986, which is newer thanRFC2396.

---

I hope you found this helpful.

Happy Coding!

The above is the detailed content of Understanding How Spaces Are Encoded: %with encodeURI vs. with URL. For more information, please follow other related articles on the PHP Chinese website!