Encode URL in JavaScript

Question

How do you safely encode a URL using JavaScript such that it can be put into a GET string   var myUrl    http   example com index html param 1 amp anotherParam 2   var myOtherUrl    http   example com index html url     myUrl    I assume that you need to encode the myUrl variable on that second line

User · Answer

You can use esapi library and encode your url using the below function. The function ensures that '/' are not lost to encoding while the remainder of the text contents are encoded:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

User · Answer

I always use this to encode stuff for URLs  This is completely safe because it will encode every single character even if it doesn t have to be encoded  function urlEncode text        encoded           for  let char of text            encoded          char charCodeAt 0  toString 16             return encoded

User · Answer

What is URL encoding   A URL should be encoded when there are special characters located inside the URL  For example    x000D   x000D  console log encodeURIComponent   notEncoded  amp       x000D   x000D   x000D    We can observe in this example that all characters except the string notEncoded are encoded with   signs  URL encoding is also known as percentage encoding because it escapes all special characters with a    Then after this   sign every special character has a unique code  Why do we need URL encoding   Certain characters have a special value in a URL string  For example  the   character denotes the beginning of a query string  In order to succesfully locate a resource on the web  it is necesarry to distinguish between when a character is meant as a part of string or part of the url structure   How can we achieve URL encoding in JS   JS offers a bunch of build in utility function which we can use to easily encode URL s  These are two convenient options    encodeURIComponent    Takes a component of a URI as an argument and returns the encoded URI string  encodeURI     Takes a  URI as an argument and returns the encoded URI string    Example and caveats   Be aware of not passing in the whole URL  including scheme  e g https     into encodeURIComponent    This can actually transform it into a not functional URL  For example    x000D   x000D     for a whole URI don t use encodeURIComponent it will transform x000D     the   characters and the URL won t fucntion properly x000D  console log encodeURIComponent  http   www random com specials amp char html     x000D   x000D     instead use encodeURI for whole URL s x000D  console log encodeURI  http   www random com specials amp char html     x000D   x000D   x000D    We can observe f we put the whole URL in encodeURIComponent that the foward slashes     are also converted to special characters  This will cause the URL to not function properly anymore    Therefore  as the name implies  use    encodeURIComponent on a certain part of a URL which you want to encode  encodeURI on a whole URL which you want to encode

User · Answer

Here is a LIVE DEMO of encodeURIComponent   and decodeURIComponent   JS built in functions    lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt        textarea          width 30           height 100px               lt  style gt       lt script gt           encode string to base64       function encode                   var txt   document getElementById  txt1   value          var result   btoa txt           document getElementById  txt2   value   result                   decode base64 back to original string       function decode                   var txt   document getElementById  txt3   value          var result   atob txt           document getElementById  txt4   value   result               lt  script gt     lt  head gt     lt body gt       lt div gt         lt textarea id  txt1  gt Some text to decode        lt  textarea gt       lt  div gt       lt div gt         lt input type  button  id  btnencode  value  Encode  onClick  encode     gt       lt  div gt       lt div gt         lt textarea id  txt2  gt         lt  textarea gt       lt  div gt       lt br  gt       lt div gt         lt textarea id  txt3  gt U29tZSB0ZXh0IHRvIGRlY29kZQ          lt  textarea gt       lt  div gt       lt div gt         lt input type  button  id  btndecode  value  Decode  onClick  decode     gt       lt  div gt       lt div gt         lt textarea id  txt4  gt         lt  textarea gt       lt  div gt     lt  body gt   lt  html gt

User · Answer

var myOtherUrl        quot http   example com index html url  quot    encodeURIComponent myUrl  replace   20 g        Don t forget the  g flag to replace all encoded

User · Answer

You should not use encodeURIComponent   directly   Take a look at RFC3986  Uniform Resource Identifier  URI   Generic Syntax     sub-delims                  amp                                                                           The purpose of reserved characters is to provide a set of delimiting characters that are distinguishable from other data within a URI    These reserved characters from the URI definition in RFC3986 ARE NOT escaped by encodeURIComponent     MDN Web Docs  encodeURIComponent       To be more stringent in adhering to RFC 3986  which reserves             and     even though these characters have no formalized URI delimiting uses  the following can be safely used    Use the MDN Web Docs function     function fixedEncodeURIComponent str      return encodeURIComponent str  replace          g  function c        return       c charCodeAt 0  toString 16

User · Answer

I would suggest to use qs npm package qs stringify  a  quot 1 2 quot   b  quot Test 1 quot        gets a 1 3D2 amp b Test 1  it is easier to use with JS object and it gives you proper URL encoding for all parameters If you are using jQuery I would go for   param method  It URL encodes an object mapping fields to values  which is easier to read than calling an escape method on each value    param  a  quot 1 2 quot   b  quot Test 1 quot       gets a 1 3D2 amp b Test 1

User · Answer

To encode a URL  as has been said before  you have two functions   encodeURI     and   encodeURIComponent     The reason both exist is that the first preserves the URL with the risk of leaving too many things unescaped  while the second encodes everything needed   With the first  you could copy the newly escaped URL into address bar  for example  and it would work   However your unescaped   amp  s would interfere with field delimiters  the    s would interfere with field names and values  and the    s would look like spaces   But for simple data when you want to preserve the URL nature of what you are escaping  this works   The second is everything you need to do to make sure nothing in your string interfers with a URL   It leaves various unimportant characters unescaped so that the URL remains as human readable as possible without interference   A URL encoded this way will no longer work as a URL without unescaping it   So if you can take the time  you always want to use encodeURIComponent   -- before adding on name value pairs encode both the name and the value using this function before adding it to the query string   I m having a tough time coming up with reasons to use the encodeURI   -- I ll leave that to the smarter people

User · Answer

Elegant way  In my humble opinion the most elegant way to encode query params is to create an object with params like   const queryParams     param1   value1   param2   value2      and then encode it using    const queryString   new URLSearchParams queryParams  toString     as mentioned in this answer   https   stackoverflow com a 53171438 7284582

User · Answer

You can use esapi library and encode your url using the below function. The function ensures that '/' are not lost to encoding while the remainder of the text contents are encoded:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

User · Answer

Check out the built-in function encodeURIComponent str  and encodeURI str   In your case  this should work   var myOtherUrl            http   example com index html url     encodeURIComponent myUrl

User · Answer

Nothing worked for me  All I was seeing was the HTML of the login page  coming back to the client side with code 200   302 at first but the same Ajax request loading login page inside another Ajax request  which was supposed to be a redirect rather than loading plain text of the login page    In the login controller  I added this line   Response Headers  land      login     And in the global Ajax handler  I did this     function          var  document     document        document ajaxSuccess function  e  response  request            var land   response getResponseHeader  land            var redrUrl     login ReturnUrl     encodeURIComponent window location           if land                if  land toString        login                     window location   redrUrl                                        Now I don t have any issue  and it works like a charm

User · Answer

Check out the built-in function encodeURIComponent str  and encodeURI str   In your case  this should work   var myOtherUrl            http   example com index html url     encodeURIComponent myUrl

User · Answer

Check out the built-in function encodeURIComponent str  and encodeURI str   In your case  this should work   var myOtherUrl            http   example com index html url     encodeURIComponent myUrl

User · Answer

Stick with encodeURIComponent    The function encodeURI   does not bother to encode many characters that have semantic importance in URLs  e g            and   amp     escape   is deprecated  and does not bother to encode     characters  which will be interpreted as encoded spaces on the server  and  as pointed out by others here  does not properly URL-encode non-ASCII characters    There is a nice explanation of the difference between encodeURI   and encodeURIComponent   elsewhere  If you want to encode something so that it can safely be included as a component of a URI  e g  as a query string parameter   you want to use encodeURIComponent

User · Answer

encodeURIComponent   is the way to go   var myOtherUrl    http   example com index html url     encodeURIComponent myUrl     BUT you should keep in mind that there are small differences from php version urlencode   and as  CMS mentioned  it will not encode every char  Guys at http   phpjs org functions urlencode  made js equivalent to phpencode     function urlencode str      str    str       toString          Tilde should be allowed unescaped in future versions of PHP  as reflected below   but if you want to reflect current      PHP behavior  you would need to add   replace    g    7E     to the following    return encodeURIComponent str       replace        21        replace         27        replace        28        replace        29        replace        2A        replace   20

User · Answer

I always use this to encode stuff for URLs  This is completely safe because it will encode every single character even if it doesn t have to be encoded  function urlEncode text        encoded           for  let char of text            encoded          char charCodeAt 0  toString 16             return encoded

User · Answer

You have three options    escape   will not encode       encodeURI   will not encode        amp             encodeURIComponent   will not encode           But in your case  if you want to pass a URL into a GET parameter of other page  you should use escape or encodeURIComponent  but not encodeURI   See Stack Overflow question Best practice  escape  or encodeURI   encodeURIComponent for further discussion

User · Answer

The best answer is to use encodeURIComponent on values in the query string  and nowhere else    However  I find that many APIs want to replace     with     so I ve had to use the following   const value   encodeURIComponent value  replace   20        const url    http   example com lang en amp key     value   escape is implemented differently in different browsers and encodeURI doesn t encode many characters  like   and even    -- it s made to be used on a full URI URL without breaking it     which isn t super helpful or secure   And as  Jochem points out below  you may want to use encodeURIComponent   on a  each  folder name  but for whatever reason these APIs don t seem to want   in folder names so plain old encodeURIComponent works great   Example   const escapedValue   encodeURIComponent value  replace   20        const escapedFolder   encodeURIComponent  My Folder       no replace const url    http   example com   escapedFolder   myKey   escapedValue

User · Answer

The best answer is to use encodeURIComponent on values in the query string  and nowhere else    However  I find that many APIs want to replace     with     so I ve had to use the following   const value   encodeURIComponent value  replace   20        const url    http   example com lang en amp key     value   escape is implemented differently in different browsers and encodeURI doesn t encode many characters  like   and even    -- it s made to be used on a full URI URL without breaking it     which isn t super helpful or secure   And as  Jochem points out below  you may want to use encodeURIComponent   on a  each  folder name  but for whatever reason these APIs don t seem to want   in folder names so plain old encodeURIComponent works great   Example   const escapedValue   encodeURIComponent value  replace   20        const escapedFolder   encodeURIComponent  My Folder       no replace const url    http   example com   escapedFolder   myKey   escapedValue

User · Answer

Stick with encodeURIComponent    The function encodeURI   does not bother to encode many characters that have semantic importance in URLs  e g            and   amp     escape   is deprecated  and does not bother to encode     characters  which will be interpreted as encoded spaces on the server  and  as pointed out by others here  does not properly URL-encode non-ASCII characters    There is a nice explanation of the difference between encodeURI   and encodeURIComponent   elsewhere  If you want to encode something so that it can safely be included as a component of a URI  e g  as a query string parameter   you want to use encodeURIComponent

User · Answer

You have three options    escape   will not encode       encodeURI   will not encode        amp             encodeURIComponent   will not encode           But in your case  if you want to pass a URL into a GET parameter of other page  you should use escape or encodeURIComponent  but not encodeURI   See Stack Overflow question Best practice  escape  or encodeURI   encodeURIComponent for further discussion

User · Answer

Performance  Today  2020 06 12  I perform speed test for chosen solutions on MacOs HighSierra 10 13 6 on browsers Chrome 83 0  Safari 13 1  Firefox 77 0  This results can be useful for massive urls encoding   Conclusions   encodeURI  B  seems to be fastest but it is not recommended for url-s   escape  A  is fast cross-browser solution solution F recommended by MDN is medium fast solution D is slowest     Details  For solutions  A B C D E F I perform two tests   for short url - 50 char - you can run it HERE for long url - 1M char - you can run it HERE    x000D   x000D  function A url    x000D   return escape url   x000D    x000D   x000D  function B url    x000D   return encodeURI url   x000D    x000D   x000D  function C url    x000D   return encodeURIComponent url   x000D    x000D   x000D  function D url    x000D   return new URLSearchParams  url   toString    x000D    x000D   x000D  function E url   x000D       return encodeURIComponent url  replace         g  escape  replace     g    2A    x000D    x000D   x000D  function F url    x000D    return encodeURIComponent url  replace          g  function c    x000D      return       c charCodeAt 0  toString 16   x000D        x000D    x000D   x000D   x000D   x000D     ---------- x000D     TEST x000D     ---------- x000D   x000D  var myUrl    http   example com index html param 1 amp anotherParam 2   x000D   x000D   A B C D E F  x000D     forEach f  gt  console log    f name   url   f myUrl  replace   url            x000D  This snippet only presents code of choosen solutions x000D   x000D   x000D    Example results for Chrome

User · Answer

Use fixedEncodeURIComponent function to strictly comply with RFC 3986   function fixedEncodeURIComponent str      return encodeURIComponent str  replace          g  function c        return       c charCodeAt 0  toString 16

User · Answer

Check out the built-in function encodeURIComponent str  and encodeURI str   In your case  this should work   var myOtherUrl            http   example com index html url     encodeURIComponent myUrl

User · Answer

You have three options    escape   will not encode       encodeURI   will not encode        amp             encodeURIComponent   will not encode           But in your case  if you want to pass a URL into a GET parameter of other page  you should use escape or encodeURIComponent  but not encodeURI   See Stack Overflow question Best practice  escape  or encodeURI   encodeURIComponent for further discussion

User · Answer

Elegant way  In my humble opinion the most elegant way to encode query params is to create an object with params like   const queryParams     param1   value1   param2   value2      and then encode it using    const queryString   new URLSearchParams queryParams  toString     as mentioned in this answer   https   stackoverflow com a 53171438 7284582

User · Answer

What is URL encoding   A URL should be encoded when there are special characters located inside the URL  For example    x000D   x000D  console log encodeURIComponent   notEncoded  amp       x000D   x000D   x000D    We can observe in this example that all characters except the string notEncoded are encoded with   signs  URL encoding is also known as percentage encoding because it escapes all special characters with a    Then after this   sign every special character has a unique code  Why do we need URL encoding   Certain characters have a special value in a URL string  For example  the   character denotes the beginning of a query string  In order to succesfully locate a resource on the web  it is necesarry to distinguish between when a character is meant as a part of string or part of the url structure   How can we achieve URL encoding in JS   JS offers a bunch of build in utility function which we can use to easily encode URL s  These are two convenient options    encodeURIComponent    Takes a component of a URI as an argument and returns the encoded URI string  encodeURI     Takes a  URI as an argument and returns the encoded URI string    Example and caveats   Be aware of not passing in the whole URL  including scheme  e g https     into encodeURIComponent    This can actually transform it into a not functional URL  For example    x000D   x000D     for a whole URI don t use encodeURIComponent it will transform x000D     the   characters and the URL won t fucntion properly x000D  console log encodeURIComponent  http   www random com specials amp char html     x000D   x000D     instead use encodeURI for whole URL s x000D  console log encodeURI  http   www random com specials amp char html     x000D   x000D   x000D    We can observe f we put the whole URL in encodeURIComponent that the foward slashes     are also converted to special characters  This will cause the URL to not function properly anymore    Therefore  as the name implies  use    encodeURIComponent on a certain part of a URL which you want to encode  encodeURI on a whole URL which you want to encode

User · Answer

Performance  Today  2020 06 12  I perform speed test for chosen solutions on MacOs HighSierra 10 13 6 on browsers Chrome 83 0  Safari 13 1  Firefox 77 0  This results can be useful for massive urls encoding   Conclusions   encodeURI  B  seems to be fastest but it is not recommended for url-s   escape  A  is fast cross-browser solution solution F recommended by MDN is medium fast solution D is slowest     Details  For solutions  A B C D E F I perform two tests   for short url - 50 char - you can run it HERE for long url - 1M char - you can run it HERE    x000D   x000D  function A url    x000D   return escape url   x000D    x000D   x000D  function B url    x000D   return encodeURI url   x000D    x000D   x000D  function C url    x000D   return encodeURIComponent url   x000D    x000D   x000D  function D url    x000D   return new URLSearchParams  url   toString    x000D    x000D   x000D  function E url   x000D       return encodeURIComponent url  replace         g  escape  replace     g    2A    x000D    x000D   x000D  function F url    x000D    return encodeURIComponent url  replace          g  function c    x000D      return       c charCodeAt 0  toString 16   x000D        x000D    x000D   x000D   x000D   x000D     ---------- x000D     TEST x000D     ---------- x000D   x000D  var myUrl    http   example com index html param 1 amp anotherParam 2   x000D   x000D   A B C D E F  x000D     forEach f  gt  console log    f name   url   f myUrl  replace   url            x000D  This snippet only presents code of choosen solutions x000D   x000D   x000D    Example results for Chrome

User · Answer

Encode URL String          var url     location  attr  href      get current url       OR     var url    folder index html param  23dd amp noob yes     or specify one  var encodedUrl   encodeURIComponent url   console log encodedUrl     outputs folder 2Findex html 3Fparam 3D 2323dd 26noob 3Dyes   for more info go http   www sitepoint com jquery-decode-url-string

User · Answer

To prevent double encoding it s a good idea to decode the url before encoding  if you are dealing with user entered urls for example  which might be already encoded    Lets say we have abc 20xyz 123 as input  one space is already encoded    encodeURI  abc 20xyz 123                   wrong   abc 2520xyz 20123  encodeURI decodeURI  abc 20xyz 123       correct   abc 20xyz 20123

User · Answer

To prevent double encoding it s a good idea to decode the url before encoding  if you are dealing with user entered urls for example  which might be already encoded    Lets say we have abc 20xyz 123 as input  one space is already encoded    encodeURI  abc 20xyz 123                   wrong   abc 2520xyz 20123  encodeURI decodeURI  abc 20xyz 123       correct   abc 20xyz 20123

User · Answer

You should not use encodeURIComponent   directly   Take a look at RFC3986  Uniform Resource Identifier  URI   Generic Syntax     sub-delims                  amp                                                                           The purpose of reserved characters is to provide a set of delimiting characters that are distinguishable from other data within a URI    These reserved characters from the URI definition in RFC3986 ARE NOT escaped by encodeURIComponent     MDN Web Docs  encodeURIComponent       To be more stringent in adhering to RFC 3986  which reserves             and     even though these characters have no formalized URI delimiting uses  the following can be safely used    Use the MDN Web Docs function     function fixedEncodeURIComponent str      return encodeURIComponent str  replace          g  function c        return       c charCodeAt 0  toString 16

User · Answer

var myOtherUrl        quot http   example com index html url  quot    encodeURIComponent myUrl  replace   20 g        Don t forget the  g flag to replace all encoded

User · Answer

Nothing worked for me  All I was seeing was the HTML of the login page  coming back to the client side with code 200   302 at first but the same Ajax request loading login page inside another Ajax request  which was supposed to be a redirect rather than loading plain text of the login page    In the login controller  I added this line   Response Headers  land      login     And in the global Ajax handler  I did this     function          var  document     document        document ajaxSuccess function  e  response  request            var land   response getResponseHeader  land            var redrUrl     login ReturnUrl     encodeURIComponent window location           if land                if  land toString        login                     window location   redrUrl                                        Now I don t have any issue  and it works like a charm

User · Answer

Similar kind of thing I tried with normal javascript  function fixedEncodeURIComponent str        return encodeURIComponent str  replace         g  escape  replace     g    2A

User · Answer

You have three options    escape   will not encode       encodeURI   will not encode        amp             encodeURIComponent   will not encode           But in your case  if you want to pass a URL into a GET parameter of other page  you should use escape or encodeURIComponent  but not encodeURI   See Stack Overflow question Best practice  escape  or encodeURI   encodeURIComponent for further discussion

User · Answer

Here is a LIVE DEMO of encodeURIComponent   and decodeURIComponent   JS built in functions    lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt        textarea          width 30           height 100px               lt  style gt       lt script gt           encode string to base64       function encode                   var txt   document getElementById  txt1   value          var result   btoa txt           document getElementById  txt2   value   result                   decode base64 back to original string       function decode                   var txt   document getElementById  txt3   value          var result   atob txt           document getElementById  txt4   value   result               lt  script gt     lt  head gt     lt body gt       lt div gt         lt textarea id  txt1  gt Some text to decode        lt  textarea gt       lt  div gt       lt div gt         lt input type  button  id  btnencode  value  Encode  onClick  encode     gt       lt  div gt       lt div gt         lt textarea id  txt2  gt         lt  textarea gt       lt  div gt       lt br  gt       lt div gt         lt textarea id  txt3  gt U29tZSB0ZXh0IHRvIGRlY29kZQ          lt  textarea gt       lt  div gt       lt div gt         lt input type  button  id  btndecode  value  Decode  onClick  decode     gt       lt  div gt       lt div gt         lt textarea id  txt4  gt         lt  textarea gt       lt  div gt     lt  body gt   lt  html gt

User · Answer

To encode a URL  as has been said before  you have two functions   encodeURI     and   encodeURIComponent     The reason both exist is that the first preserves the URL with the risk of leaving too many things unescaped  while the second encodes everything needed   With the first  you could copy the newly escaped URL into address bar  for example  and it would work   However your unescaped   amp  s would interfere with field delimiters  the    s would interfere with field names and values  and the    s would look like spaces   But for simple data when you want to preserve the URL nature of what you are escaping  this works   The second is everything you need to do to make sure nothing in your string interfers with a URL   It leaves various unimportant characters unescaped so that the URL remains as human readable as possible without interference   A URL encoded this way will no longer work as a URL without unescaping it   So if you can take the time  you always want to use encodeURIComponent   -- before adding on name value pairs encode both the name and the value using this function before adding it to the query string   I m having a tough time coming up with reasons to use the encodeURI   -- I ll leave that to the smarter people

User · Answer

Encode URL String          var url     location  attr  href      get current url       OR     var url    folder index html param  23dd amp noob yes     or specify one  var encodedUrl   encodeURIComponent url   console log encodedUrl     outputs folder 2Findex html 3Fparam 3D 2323dd 26noob 3Dyes   for more info go http   www sitepoint com jquery-decode-url-string

User · Answer

Use fixedEncodeURIComponent function to strictly comply with RFC 3986   function fixedEncodeURIComponent str      return encodeURIComponent str  replace          g  function c        return       c charCodeAt 0  toString 16

User · Answer

Similar kind of thing I tried with normal javascript  function fixedEncodeURIComponent str        return encodeURIComponent str  replace         g  escape  replace     g    2A

User · Answer

I would suggest to use qs npm package qs stringify  a  quot 1 2 quot   b  quot Test 1 quot        gets a 1 3D2 amp b Test 1  it is easier to use with JS object and it gives you proper URL encoding for all parameters If you are using jQuery I would go for   param method  It URL encodes an object mapping fields to values  which is easier to read than calling an escape method on each value    param  a  quot 1 2 quot   b  quot Test 1 quot       gets a 1 3D2 amp b Test 1

User · Answer

encodeURIComponent   is the way to go   var myOtherUrl    http   example com index html url     encodeURIComponent myUrl     BUT you should keep in mind that there are small differences from php version urlencode   and as  CMS mentioned  it will not encode every char  Guys at http   phpjs org functions urlencode  made js equivalent to phpencode     function urlencode str      str    str       toString          Tilde should be allowed unescaped in future versions of PHP  as reflected below   but if you want to reflect current      PHP behavior  you would need to add   replace    g    7E     to the following    return encodeURIComponent str       replace        21        replace         27        replace        28        replace        29        replace        2A        replace   20

[javascript] Encode URL in JavaScript?

Examples related to javascript

Examples related to url

Examples related to encode

Examples related to urlencode