How to Encode URL in JavaScript?

You can use the built-in method encodeURIComponent() to encode a URL in JavaScript.

const url = 'http://www.google.com/search?q='; const queryString = '@Tom & #Jerry' const encUrl = url + encodeURIComponent(queryString); // Output: http://www.google.com/search?q=%40Tom%20%26%20%23Jerry

URL Encoding

A URL (Uniform Resource Locator) is a web address. URL encoding mechanism is used for encoding any data in URLs to a secure format that can be transmitted over the internet. The reliability and security of the URLs are increased with URL encoding.

Why do you need to encode?

How to encode URL parameters in javascript

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 they must not be a part of query strings or path segments. Unreserved characters have no special meaning. This means that you need to encode these characters when passing them into a URL. Each character that needs to be URL-encoded is encoded using the character "%" and a two-character hex value corresponding to its utf-8 character.

https://www.example.com //normal URL

https%3A%2F%2Fwww.example.com //encoded URL

JavaScript URL Encode

Encoding a URL can be done with the following JavaScript functions depending on what you are going to do. They are encodeURI() and encodeURIComponent(). These JavaScript functions are used to encode a URL by replacing each instance of certain characters by up to four escape sequences representing the UTF-8 encoding of the character.

encodeURI()

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

encodeURI( complete_uri_string )

Example

const url = 'http://example.com/$some # thing here@/'; const encodedUrl = encodeURI(url); // output: http://example.com/$some%20#%20thing%20here@/

Browser View

JavaScript encodedUrl()

Full Source | JavaScript

<!DOCTYPE html> <html> <body> <h2>JavaScript encodedUrl()</h2> <p id="demo"></p> <script> const url = 'http://example.com/$some # thing here@/'; // encode complete URL const encodedUrl = encodeURI(url); // print encoded URL document.getElementById("demo").innerHTML = encodedUrl; // output: http://example.com/$some%20#%20thing%20here@/ </script> </body> </html>

encodeURIComponent()

The encodeURIComponent function is a built-in method and it 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 meaning except -_.!~*'().

encodeURIComponent( uri_string_component )

Ideally, you should use the encodeURIComponent() method only for encoding query string parameters or path segments. Example

Browser View

JavaScript Encode URL Parameters

Full Source | JavaScript

<!DOCTYPE html> <html> <body> <h2>JavaScript Encode URL Parameters</h2> <p id="demo"></p> <script> const url = 'http://www.google.com/search?q='; const queryString = '@Tom & #Jerry' // build full URL const encUrl = url + encodeURIComponent(queryString); // print full URL document.getElementById("demo").innerHTML = encUrl; // Output: http://www.google.com/search?q=%40Tom%20%26%20%23Jerry </script> </body> </html>

The difference between two functions is that the encodeURI() encodes a full URL and encodeURIComponent() encodes a single URL parameter value.

URLSearchParams

An object implementing URLSearchParams can directly be used in a for...of structure to iterate over key/value pairs in the same order as they appear in the query string. This works in all current browsers. It can be used like this: Example

const params = new URLSearchParams({ var1: "value1", var2: "value2", arr: "foo", }); console.log(params.toString()); //Output: var1=value1&var2=value2&arr=foo

Browser View

JavaScript URLSearchParams

Full Source | JavaScript

<!DOCTYPE html> <html> <body> <h2>JavaScript URLSearchParams</h2> <p id="demo"></p> <script> const params = new URLSearchParams({ var1: "value1", var2: "value2", arr: "foo", }); document.getElementById("demo").innerHTML = params.toString(); </script> </body> </html>

Next : How to force Input field to enter numbers only | JavaScript

Related Topics