How to encode a URL using JavaScript

URL encoding, also known as percent-encoding, is a process of encoding special characters in a URL to make the transmitted data more secure and reliable. It helps avoid cross-site attacks while calling a remote web service.

There can be two types of characters in a URL: reserved and unreserved. The reserved characters are those characters that have special meaning within a URL. For example, ?, /, #, :, etc. are reserved characters and must not be a part of query strings or path segments.

Unreserved characters have no special meaning. In URL encoding, these characters are converted to special character sequences.

In this article, you'll learn how to encode a URL using JavaScript built-in functions. JavaScript provides two functions to help you encode a URL: encodeURI() and encodeURIComponent(). Both of these methods are intended to be used for different use cases. Let us start with the first.

encodeURI() method

The encodeURI() method encodes a complete URL. It assumes that the input is a full URL with some special characters that need encoding. Therefore, it doesn't encode the reserved characters (~!$&@#*()=:/,;?+).

Let us look at an example:

const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURI(url)

// print encoded URL
console.log(encodedUrl)

// output: http://example.com/!learn%20javascript$/

encodeURIComponent() method

The encodeURIComponent function should be used to encode a single URL component (like query string parameter) instead of the complete URL. It uses the UTF-8 encoding scheme and encodes all characters with special meanings except -_.!~*'().

If you use encodeURIComponent() to encode a full URL, everything, including path separators (/), will be encoded as shown below:

const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURIComponent(url)

// print encoded URL
console.log(encodedUrl)

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F

Ideally, you should use the encodeURIComponent() method only for encoding query string parameters or path segments. Here is an example:

const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript

You should call the encodeURIComponent() method for every query string parameter, which might include special characters to avoid network errors and unexpected responses.

Note: MDN suggests an improvement to adhere the RFC 3986 standard (which reserves !, ', (, ), and * characters) by implementing the following method:

const fixedEncodeURIComponent = str => {
  return encodeURIComponent(str).replace(/[!'()*]/g, c => {
    return '%' + c.charCodeAt(0).toString(16)
  })
}

console.log(fixedEncodeURIComponent('node * ! javascript'))

// output: node%20%2a%20%21%20javascript

Read Next: How to decode a URL using JavaScript

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.