WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Encode URL in JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the encodeURIComponent() Method

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

The encodeURIComponent() method encode all characters except the following:

A-Z a-z 0-9 - _ . ! ~ * ' ( )

Let's check out the follwoing to see how this method works:

  • <script>
  •     // URL unsafe string
  •     var item = "$url+/unsafe@item #name;"
  •     
  •     // Encode item name and append to URL
  •     var url = "http://example.com/search.php?product=" + encodeURIComponent(item);
  •     
  •     document.write(url);
  •     // Prints: http://example.com/search.php?product=%24url%2B%2Funsafe%40item%20%23name%3B
  • </script>

You can alternatively use the encodeURI() method, which does not encode characters that have special meaning (reserved characters) for a URI e.g. #, /, ?, etc.

The encodeURI() method encode all characters except the following:

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

The following example demonstrates how this method works:

  • <script>
  •     // Sample URL
  •     var url = "http://example.com/search.php?product=laptop&price=500#featured";
  •     
  •     document.write(url);
  •     // Prints: http://example.com/search.php?product=laptop&price=500#featured
  • </script>

Please, check out the tutorials on HTML URL and HTML URL encoding to learn more about the different components of a URL and URL encoding.


Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.