How to Encode URL in JavaScript: Simple Guide with Examples

In JavaScript, you can encode URLs using encodeURI() to encode a full URL or encodeURIComponent() to encode individual URL components like query parameters. These functions convert special characters into a format that can be safely transmitted over the internet.

Syntax

encodeURI(uri) encodes a complete URL but leaves characters like :, /, ?, and = intact because they have special meaning in URLs.

encodeURIComponent(component) encodes a URL component, converting all special characters including &, =, and ?.

javascript

encodeURI(uri)
encodeURIComponent(component)

Example

This example shows how to encode a full URL and a query parameter separately using encodeURI() and encodeURIComponent().

javascript

const url = "https://example.com/search?query=hello world&sort=asc";

const encodedFullUrl = encodeURI(url);
const encodedQueryParam = encodeURIComponent("hello world&sort=asc");

console.log("Encoded full URL:", encodedFullUrl);
console.log("Encoded query parameter:", encodedQueryParam);

Output

Encoded full URL: https://example.com/search?query=hello%20world&sort=asc
Encoded query parameter: hello%20world%26sort%3Dasc

Common Pitfalls

A common mistake is using encodeURI() to encode query parameters, which can leave special characters like & and = unencoded, causing errors in URL parsing.

Always use encodeURIComponent() for individual query parameters to ensure all special characters are encoded.

javascript

const param = "hello world&sort=asc";

// Wrong: using encodeURI for query parameter
const wrongEncoding = encodeURI(param);

// Right: using encodeURIComponent for query parameter
const rightEncoding = encodeURIComponent(param);

console.log("Wrong encoding:", wrongEncoding);
console.log("Right encoding:", rightEncoding);

Output

Wrong encoding: hello%20world&sort=asc
Right encoding: hello%20world%26sort%3Dasc

Quick Reference

• encodeURI(): Use for encoding a full URL.
• encodeURIComponent(): Use for encoding URL parts like query parameters.
• Use decodeURI() and decodeURIComponent() to decode encoded URLs or components.

Key Takeaways

Use encodeURI() to encode complete URLs without encoding URL syntax characters.

Use encodeURIComponent() to encode individual URL components like query parameters.

Never use encodeURI() for query parameters as it leaves special characters unencoded.

Decoding functions decodeURI() and decodeURIComponent() reverse the encoding process.

Encoding URLs properly prevents errors and security issues when sending URLs over the internet.