Escaping javscript URLs and their params

Did you know the escape() function is deprecated? It doesn't handle its role of escaping characters well, especially non-ASCII characters. Instead, you should use encodeURI or encodeURIComponent.

encodeURI()

Use encodeURI when you want a working URL, for example, with location.href. It assumes the input is a complete URI and encodes the necessary characters.

var escapedURI = encodeURI("http://example.io/file name with spaces.html")

The value of escapedURI would be:

http://example.io/file%20name%20with%20spaces.html

encodeURIComponent()

encodeURIComponent() encodes the complete string, which can break a URI:

var encodeURIComponentWithSpaces = encodeURIComponent("http://example.io/file name with spaces.html")

This would return:

http%3A%2F%2Fexample.io%2Ffile%20name%20with%20spaces.html

Instead, use encodeURIComponent() when encoding a parameter part of a URI:

var encodeURIComponentOnParamsOnly = "http://example.io/file.html?para1=" + encodeURIComponent("va1!%$");

This would return:

http://example.io/file.html?para1=va1!%25%24

Example code:

Javascript

<script>
// Encode a URI with spaces using encodeURI
var escapedURIWithSpaces = encodeURI("http://www.example.com/file name with spaces.html");

// Encode a URI with spaces and parameters using encodeURI
var escapedURIWithSpacesAndParams = encodeURI("http://www.example.com/file name with spaces.html?para1=va1!%$");

// Encode the entire URI string using encodeURIComponent
var encodeURIComponentWithSpaces = encodeURIComponent("http://www.example.com/file name with spaces.html");

// Encode the entire URI string with spaces and parameters using encodeURIComponent
var encodeURIComponentSpacesAndParams = encodeURIComponent("http://www.example.com/file name with spaces.html?para1=va1!%$");

// Log the encodeURIComponent result for URI with spaces and parameters to the console
console.log(encodeURIComponentSpacesAndParams);

// Set the inner HTML of the elements with the respective encoded URIs
document.getElementById('escapedURIWithSpaces').innerHTML = escapedURIWithSpaces;
document.getElementById('escapedURIWithSpacesAndParams').innerHTML = escapedURIWithSpacesAndParams;
document.getElementById('encodeURIComponentWithSpaces').innerHTML = encodeURIComponentWithSpaces;
document.getElementById('encodeURIComponentSpacesAndParams').innerHTML = encodeURIComponentSpacesAndParams;

</script>

<div id="escapedURIWithSpaces"></div>
<div id="escapedURIWithSpacesAndParams"></div>
<div id="encodeURIComponentWithSpaces"></div>
<div id="encodeURIComponentSpacesAndParams"></div>

Output

http://www.example.com/file%20name%20with%20spaces.html
http://www.example.com/file%20name%20with%20spaces.html?para1=va1!%25$
http%3A%2F%2Fwww.example.com%2Ffile%20name%20with%20spaces.html
http%3A%2F%2Fwww.example.com%2Ffile%20name%20with%20spaces.html%3Fpara1%3Dva1!%25%24