Encode Url in Javascript

When working with JavaScript, you may come across the need to encode URLs. This is particularly useful when you want to pass data through a URL without causing any issues. In this blog post, we will explore different solutions to encode URLs in JavaScript.

Solution 1: Using the encodeURIComponent() function

The encodeURIComponent() function is a built-in JavaScript function that encodes a URI component by replacing each instance of certain characters with escape sequences. This function is useful when you want to encode the entire URL.

Here’s an example of how you can use the encodeURIComponent() function:

const url = 'https://www.example.com/?name=John Doe';

const encodedUrl = encodeURIComponent(url);

console.log(encodedUrl);

The output of the above code will be:

https%3A%2F%2Fwww.example.com%2F%3Fname%3DJohn%20Doe

Solution 2: Using the encodeURI() function

The encodeURI() function is another built-in JavaScript function that encodes a URI by replacing each instance of certain characters with escape sequences. However, unlike encodeURIComponent(), encodeURI() does not encode characters that are reserved in a URL.

Here’s an example of how you can use the encodeURI() function:

const url = 'https://www.example.com/?name=John Doe';

const encodedUrl = encodeURI(url);

console.log(encodedUrl);

The output of the above code will be:

https://www.example.com/?name=John%20Doe

Both encodeURIComponent() and encodeURI() functions are useful for encoding URLs in JavaScript. The choice between them depends on your specific use case. If you want to encode the entire URL, including reserved characters, use encodeURIComponent(). If you only want to encode the URI part of the URL, use encodeURI().

Now that you know how to encode URLs in JavaScript, you can safely pass data through URLs without any issues. Happy coding!