javascript - How do I URL encode spaces and the word "and"? - Stack Overflow

admin管理员组

文章数量:1352179

I need to URL encode the following characters.

Key	Encoding
Space	%20
and (literal word)	%26

I need to URL encode the following characters.

Key	Encoding
Space	%20
and (literal word)	%26

---

To do this, I've e 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("%20");
word = word.split("and").join("%26");

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

• javascript
• urlencode

Share Improve this question Follow edited May 1, 2022 at 4:20 Viradex 3,78833 gold badges1414 silver badges3939 bronze badges asked May 1, 2022 at 0:37 user18982394user18982394

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

There are two ways of acplishing this.

---

1. Use replace()

The first solution is to use the replace() function, available on the string primitive.

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

console.log(word);

Let's walk through the code.

1. The first replace() function that is being used is replacing all the spaces (denoted by \s) with %20. 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!
2. The second replace() is getting all of the and occurrences, and replacing them globally with %26. 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 posed of two "surrogate" characters).

Basically, it will encode all of the special characters to their URL encoding characters (e.g. Space will be %20).

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, "%26");

console.log(word);

Let's go through the code.

1. The encodeURIComponent() line will encode any special characters to their URL encoding, as stated before.
2. 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.

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

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

word = word.replace(/\s/g, "%20");
word = word.replace(/and/gmi, "%26");

本文标签： javascriptHow do I URL encode spaces and the word quotandquotStack Overflow