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?

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@/

JavaScript encodedUrl()
<!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
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

JavaScript Encode URL Parameters
<!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

JavaScript URLSearchParams
<!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>
Related Topics
- JavaScript Popup Boxes
- Opening a new window in JavaScript
- How to Create Drop-Down Lists in JavaScript
- How do I include a JavaScript file in another JavaScript file?
- Print the content of a Div using JavaScript/jQuery
- How to get the current URL using JavaScript ?
- How to Detect a Mobile Device with JavaScript/jQuery
- How to validate an email address in JavaScript
- JavaScript Array Iteration
- How to Remove a Specific Item from an Array in JavaScript
- What is JavaScript closures?
- How To Remove a Property from a JavaScript Object
- How to get selected value from Dropdown list in JavaScript
- How do I get the current date in JavaScript?
- How to Open URL in New Tab | JavaScript
- How to delay/wait/Sleep in code execution | JavaScript
- How to round to at most 2 decimal places | JavaScript
- How to convert string to boolean | JavaScript
- How to check undefined in JavaScript?
- How To Copy to Clipboard | JavaScript
- How to force Input field to enter numbers only | JavaScript
- How to create multiline string in JavaScript
- How to Check for an Empty String in JavaScript?