在$ _GET查询网址中使用'+'代替％2C'

Question

I have a form with a location search input. The search input uses google places autocomplete. I am passing the value of the search input to a hidden field named 'query'. When the form is submitted the value of the hidden field is then appended to the URL as a querystring:

<input id="foo" type="text" name="search" placeholder="Search...">
<input id="bar" type="hidden" name="query" value="">

From the above example, the URL will look like this:

http://example.com/?query=ExampleC%2Blocation%2C%2BUS

This querystring is only used for analysing analytics. Is there a way to format the URL in a more human-readable way with pluses? So, for example:

http://example.com/?query=Example+location,+us

In my Javascript file I have tried the following:

document.getElementById("bar").value = usersearch.split(' ').join('+');

And in my PHP I have added the following for already-performed searches:

<input id="bar" type="hidden" name="query" value="<?php echo urlencode($_GET['query']) ?>">

Neither seems to work. The URL still ends up with %2B etc.

Answer 1

JavaScript: decodeURIComponent

const someEncodedUri = 'http://example.com/?query=ExampleC%2Blocation%2C%2BUS';
console.log(decodeURIComponent(someEncodedUri)); // http://example.com/?query=Example+location,+us

PHP: urldecode

$someEncodedUri = 'http://example.com/?query=ExampleC%2Blocation%2C%2BUS';
echo urldecode($someEncodedUri));

Do note that if you are actually hitting the URL, you will want to hit it encoded to avoid problems, and then just decode it on the server for analytics purposes.