JavaScript URL Encoding Functions

JavaScript provides two functions for URL encoding: encodeURI() and encodeURIComponent().
In this guide, we'll compare their purposes and highlight the key differences between them.

URL Encoding Function Comparison

JavaScript provides two URL encoding functions: encodeURI() and encodeURIComponent(). The table below compares their purposes and usage in detail.

Comparison between JavaScript URL encoding functions: encodeURI() and encodeURIComponent()
Feature	`encodeURI()`	`encodeURIComponent()`
Purpose	Encodes a full URI, excluding certain special characters	Encodes a URI component (part of a URI)
Typical Use Case	Used to encode an entire URI	Used to encode individual values within a query string
Characters Not Encoded	A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #	A-Z a-z 0-9 - _ . ! ~ * ' ( )
Use in XMLHttpRequest	Not suitable – special characters may not be handled correctly	Suitable – special characters are properly encoded

The following example demonstrates the difference between encodeURI() and encodeURIComponent() in JavaScript.

JavaScript Source: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#%EC%84%A4%EB%AA%85

const set1 = ";,/?:@&=+$";      // Reserved characters
const set2 = "-_.!~*'()";       // Unescaped characters
const set3 = "#";               // Number sign
const set4 = "ABC abc 123";     // Letters, numbers, and spaces

console.log(encodeURI(set1));      // ;,/?:@&=+$
console.log(encodeURI(set2));      // -_.!~*'()
console.log(encodeURI(set3));      // #
console.log(encodeURI(set4));      // ABC%20abc%20123

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123

As shown in the output:

The encodeURI() function does not encode certain special characters that are considered valid parts of a URI. For example, in set1 and set2, many reserved and unescaped characters remain unchanged. However, spaces are encoded as %20.
The encodeURIComponent() function encodes nearly all special characters. In the output for set1, set2, set3, and set4, you can see that all applicable characters are percent-encoded, including the number sign (#) and spaces.

These results clearly illustrate how encodeURI() and encodeURIComponent() differ in behavior and use cases.

Best Practices and Precautions

The table below outlines best practices and precautions when using encodeURI() and encodeURIComponent() in JavaScript.

Best practices and precautions for using JavaScript URL encoding functions
Item	Best Practice	Precaution
Encoding data for HTTP requests	Use `encodeURIComponent()` to encode data	Be careful with special characters and spaces
Encoding parts of a URL	Use `encodeURI()` for entire URI structures	Only use if encoding a complete URI
Validating external input	Sanitize and validate any user-provided data	Helps prevent potential security issues
Checking URL length limits	Account for potential length restrictions	Avoid exceeding the maximum URL length
Handling special characters	Use `encodeURIComponent()` for better coverage	`encodeURI()` may not encode all special characters
Choosing based on HTTP method	Use `encodeURIComponent()` for GET; choose accordingly for POST	Select based on the request method being used
Ensuring cross-environment compatibility	Test across multiple environments	Encoding behavior may vary in different contexts

One important note: while URL encoding is essential for security, it does not provide complete protection. Encoding special characters and spaces helps prevent some security issues, but it is not a comprehensive solution. Therefore, URL encoding should be combined with other security measures to ensure robust protection.

Specifications

JavaScript URL Encoding Functions Specification
Specification
`encodeURI()`	ECMAScript Language Specification #sec-encodeuri-uri
`encodeURIComponent()`	ECMAScript Language Specification #sec-encodeuricomponent-uricomponent