How do I URL encode spaces and the word "and"?-CodePudding

I need to URL encode the following characters.

Key	Encoding
`Space`
and (literal word)	`&`

To do this, I've come up with the following code. (I need to use var because I'm targeting older browsers.)

var word = "Windows and Mac"; // This can be anything

word = word.split(" ").join(" ");
word = word.split("and").join("&");

However, there are a few issues with this code.

This isn't the best solution, and there is most likely a better one available.
The and is case-sensitive (meaning I can't input "AND", "aNd", etc).

Is there another method to fulfill those requirements? It also needs to work on older browsers (like IE).

CodePudding user response：

There are a few ways to accomplish this.

1. Use replace()

The first solution is to use the String.replace() function.

Instead of breaking up and joining the strings together with a different character again, you can use the simpler replace() function.

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, " ");
word = word.replace(/and/ig, "&");

console.log(word);

Let's walk through the code.

The first replace() function that is being used is replacing all the spaces (denoted by \s) with . The first parameter uses RegExp to globally replace all of the occurrences (denoted by g, at the end of the RegExp). There is a newer method in JavaScript called replaceAll(), but unfortunately, that came way after ES6!
The second replace() is getting all of the and occurrences, and replacing them globally with &. However, there is another flag in the RegExp (the i flag), which means that it is case-insensitive. This means that it'll work with words like AND, aNd, and so on.

2. Use encodeURIComponent()

The second, better solution is to use the encodeURIComponent() function.

According to MDN Web Docs:

The 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 ).

Also, like 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, "&");

console.log(word);

Let's go through the code.

The 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, "&");
word = encodeURIComponent(word);

console.log(word);

You can see that the % is encoded to %, 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.

CodePudding user response：

It doesn't look bad, but is better to use 'replace', for the 'and' problem just use regex:

var word = "Windows and Mac"; // This can be anything

word = word.replace(/\s/g, " ");
word = word.replace(/and/gmi, "&");