javascript encodeURIComponent and converting spaces to + symbols

Question

I would like to encode my URL, but I want to convert spaces to plus symbols.

This is what I attempted to do...

var search = "Testing this here &";

encodeURIComponent(search.replace(/ /gi,"+"));

The output from that is Testing%2Bthis%2Bhere%2B%26 but what I would like it to be is Testing+this+here+%26 I tried replacing the space with %20 to convert it into a plus symbol, but that didn't seem to work. Can anyone tell me what it is I'm doing wrong here?

Answer 1

encodeURIComponent(search).replace(/%20/g, "+");

What you're doing wrong here is that first you convert spaces to pluses, but then encodeURIComponent converts pluses to "%2B".

Answer 2

Just try encodeURI() and encodeURIComponent() yourself...

console.log(encodeURIComponent('@#$%^&*'));

Input: @#$%^&*. Output: %40%23%24%25%5E%26*. So, wait, what happened to *? Why wasn't this converted? TLDR: You actually want fixedEncodeURIComponent() and fixedEncodeURI(). Long-story...

Don't use encodeURIComponent() directly.

You should use fixedEncodeURIComponent(), as indicated by the MDN Documentation. encodeURIComponent does not encode any of the following: !',()*. You need to use this other function. It will solve not only your space problems, but other character problems.

function fixedEncodeURIComponent(str) { return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charCodeAt(0).toString(16); }); }

To quote the MDN Documentation encodeURIComponent()...

To be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used: fixedEncodeURIComponent().