I’ve needed to encode the following characters to URL encoding.
- Space (key, not word) –
- and (upper and lower case) –
To do this, I’ve come up with the following code.
var word = "Windows and Mac"; // This can be anything word = word.split(" ").join("%20"); word = word.split("and").join("%26");
However, there are a few issues with this code.
- This isn’t the best solution, and there might be a better one available.
- The and is case-sensitive.
Is there another method to fulfill those requirements? It also needs to work on older browsers (like IE).
There are a few ways to accomplish this.
The first solution is to use the
Instead of breaking up and joining the strings together with a different character again, you can use the simpler
Also, this function works in Internet Explorer 5.5 and above, which means it fulfils the requirements!
To use it, simply use the code below.
var word = "Windows and Mac"; word = word.replace(/\s/g, "%20"); word = word.replace(/and/ig, "%26"); console.log(word);
Let’s walk through the code.
- The first
replace()function that is being used is replacing all the spaces (denoted by
%20. The first parameter uses RegExp to globally replace all of the occurrences (denoted by
replaceAll(), but unfortunately, that came way after ES6!
- The second
replace()is getting all of the
andoccurrences, and replacing them globally with
%26. However, there is another flag in the RegExp (the
iflag), which means that it is case-insensitive. This means that it’ll work with words like
aNd, and so on.
The second, better solution is to use the
According to MDN Web Docs:
encodeURIComponent()function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).
Basically, it will encode all of the special characters to their URL encoding characters (e.g. Space will be
replace(), this function is supported from Internet Explorer 5.5 and onward.
To use this, you need to use the code below.
var word = "Windows and Mac"; word = encodeURIComponent(word); word = word.replace(/and/ig, "%26"); console.log(word);
Let’s go through the code.
encodeURIComponent()line will encode any special characters to their URL encoding, as stated before.
- We still have to leave the
replace()function as is, as the
encodeURIComponent()only encodes characters, not words. Read the first solution for more information on how this line of code works.
Also, the order of the code is important! If we, for example, place the
replace() before the
encodeURIComponent() function, it will encode the
%, which will lead to some weird results (no errors). You can try it out yourself below!
var word = "Windows and Mac"; word = word.replace(/and/ig, "%26"); word = encodeURIComponent(word); console.log(word);
You can see that the
% is encoded to
%25, which causes some weird results!
In conclusion, there are two solutions available that both work on Internet Explorer 5.5 and greater. These solutions also fulfil your requirements.