can someone tell me the why we need decodeURIComponent

Question

I have this piece of code that I couldn't find any explanation for. When I googled decodeURIComponent it said it is the reverse of encodeURIComponent, however, I can't find encodeURIComponent anywhere in my code.

getParameterByName = (name, url) => {
    if (!url)
       url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`),
    results = regex.exec(url);
    if (!results)
        return null;
    if (!results[2])
        return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

this is the URL http://localhost:8000/restaurant.html?id=2

So, could someone explain this code for me.

Maybe you are receiving already encoded string in the `url` variable. — Hassan Imam, Mar 15 '18 at 07:41
@JSLover — That just means that the data entered to it doesn't include any characters that need to be encoded. It's no guarantee that nobody will ever enter encoded characters in the future. — Quentin, Mar 15 '18 at 08:22

score 2 · Accepted Answer · edited Oct 07 '21 at 11:39

As defined in the RFC 3986, URIs can only contain the characters -_.~a-zA-Z0-9 and :/?#[]@!$&'()*+,;=, where the latter group has some special meaning. By restricting to these characters, URLs are clearly delimited (usually by a space or newline) and survive through proxies and other services that have trouble handling non-ASCII characters.

If you fill in a GET form, the user input will be encoded. For instance, if you google for Hellö Lädies&Gentlemen+Bob, the browser will request

https://www.google.com/search?q=Hell%C3%B6+L%C3%A4dies%26Gentlemen%2BBob

You see that all non-ASCII characters and the ampersand(&) have been encoded with a percent signs and the hexadecimal representation of the characters in UTF-8 encoding.

The space character is handled differently; since it is very common in user input it got assigned the shorter character +. That means + has to be percent-encoded as well, as %2B.

The code you have extracts the GET parameter name from the URL. If it is there, the final line

return decodeURIComponent(results[2].replace(/\+/g, ' '));

first undoes the encoding of spaces as +.

decodeURIComponent is then used to get the value of the name parameter. For instance, if the user inputted a name of name of René Müller&勒内穆勒, the browser will send name=Ren%C3%A9+M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92, and decodeURIComponent will yield the original input (try it yourself):

> decodeURIComponent('Ren%C3%A9 M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92')
'René Müller&勒内穆勒'

can someone tell me the why we need decodeURIComponent

1 Answers1