How To Encode Url In Javascript

by

When working with URLs in JavaScript, you might come across a situation where you need to encode certain characters in the URL to make it safe for web browsers and servers. URL encoding, also known as percent-encoding, is a method of representing special characters in a URL by replacing them with their corresponding percent-encoded values. This is especially important when dealing with query string parameters.

In this blog post, we will discuss the two primary methods for URL encoding in JavaScript:

  • encodeURIComponent()
  • encodeURI()

Method 1: encodeURIComponent()

The encodeURIComponent() function is used to encode a single component of a URI, such as a query string parameter. It encodes all characters except for the following: A-Z a-z 0-9 – _ . ! ~ * ‘ ( )

Here’s an example of using encodeURIComponent():

const queryParam = 'JavaScript is awesome!';
const encodedQueryParam = encodeURIComponent(queryParam);

console.log(encodedQueryParam);
// Output: "JavaScript%20is%20awesome%21"

In this example, the space character and the exclamation mark are replaced with their corresponding percent-encoded values.

Method 2: encodeURI()

The encodeURI() function is used to encode an entire URI. It encodes all characters except for the following: A-Z a-z 0-9 ; , / ? : @ & = + $ – _ . ! ~ * ‘ ( ) #

Here’s an example of using encodeURI():

const uri = 'https://example.com/search?q=JavaScript is awesome!';
const encodedURI = encodeURI(uri);

console.log(encodedURI);
// Output: "https://example.com/search?q=JavaScript%20is%20awesome!"

In this example, only the space character is replaced with its percent-encoded value, as the other characters are considered safe for the entire URI.

Note:

It’s important to use the appropriate encoding function depending on your use case. If you’re encoding a single component like a query parameter, use encodeURIComponent(). If you need to encode an entire URI, use encodeURI().

Conclusion

In this blog post, we’ve discussed the two primary methods for URL encoding in JavaScript, encodeURIComponent() and encodeURI(). By using these functions, you can make your URLs safe for web browsers and servers, ensuring that your data is transmitted correctly.