← Back tothis vs that

encodeURI vs encodeURIComponent

Written byPhuoc Nguyen
10 Sep, 2020
Last updated
16 Jun, 2022
Because a URL can consist of standard ASCII characters only, other special characters have to be encoded. They will be replaced by a sequence of different characters that represent its UTF-8 encoding.
`encodeURI` and `encodeURIComponent` are used for that purpose.


  1. `encodeURI` is used to encode a full URL.
    encodeURI('https://domain.com/path to a document.pdf');

    // 'https://domain.com/path%20to%20a%20document.pdf'
    Whereas `encodeURIComponent` is used for encoding a URI component such as a query string.
    `http://domain.com/?search=\${encodeURIComponent('encode & decode param')}`;

    // 'http://domain.com/?search=encode%20%26%20decode%20param'
  2. There are 11 characters which are not encoded by `encodeURI`, but encoded by `encodeURIComponent`.
    The following snippet prints these characters:
    const arr = Array(256)
    .map((_, i) => String.fromCharCode(i))
    .filter((c) => encodeURI(c) != encodeURIComponent(c));

    arr.forEach((c) => console.log(c, encodeURI(c), encodeURIComponent(c)));
    Here is the list of those characters:

Good to know

  1. `decodeURI` and `decodeURIComponent` are methods to decode a string that is encoded by `encodeURI` and `encodeURIComponent` respectively.
  2. `encodeURIComponent` does not encode `-_.!~*'()`. If you want to these characters are encoded, you have to replace them with corresponding UTF-8 sequence of characters:
    const encode = (str) =>
    .replace(/\-/g, '%2D')
    .replace(/\_/g, '%5F')
    .replace(/\./g, '%2E')
    .replace(/\!/g, '%21')
    .replace(/\~/g, '%7E')
    .replace(/\*/g, '%2A')
    .replace(/\'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29');

    encode("What's result of (4 + 2)?"); // "What%27s%20result%20of%20%284%20%2B%202%29%3F"
    The decoding function could look like as follow:
    const decode = (str) =>
    .replace(/\\%2D/g, '-')
    .replace(/\\%5F/g, '_')
    .replace(/\\%2E/g, '.')
    .replace(/\\%21/g, '!')
    .replace(/\\%7E/g, '~')
    .replace(/\\%2A/g, '*')
    .replace(/\\%27/g, "'")
    .replace(/\\%28/g, '(')
    .replace(/\\%29/g, ')')

    decode('What%27s%20result%20of%20%284%20%2B%202%29%3F'); // "What's result of (4 + 2)?"

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn