How to append encoded parameters to the url using javascript?

Question

I have a search input box and I am appending its data to an URL after the "#", e.g http://test.cl.com/#pqr xyz (using hash to avoid reloading of page). It is working fine but my data is not encoded as space is not replaced with + or %20 So before appending I am using the encodeURI function and then appending that value to the URL but still in the address bar there is the space character. Before assigning I have checked that I am appending the correct value (by alerting prq%20xyz).

Current output: http://test.cl.com/#pqr xyz Required output : http://test.cl.com/#pqr+xyz

Please help me to find out the cause of the prob. Thanks!

<html>
<head>
<title>Test</title>
    <script type="text/javascript" src="jquery1.6.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        $('#btn').click(function(){
             var url = encodeURI("pqr xyz");
              alert(url); // shows encoded value
             window.location.hash = (url);  
         });
    });
    </script>
</head>
<body>        

        <h3>sample app</h3>
        <button id="btn">
            append
        </button>


</body>

Just an additional comment: you don't need to alert strings or object to confirm there contents or state. You can use console.log(url); and it will pop up in the console of google chrome and firefox (not sure about IE). — mahulst
– mahulst, Commented Aug 30, 2011 at 9:13
Can not understand: what is the problem? In the browser replaces the "+" or "%20" for space in the address bar? You really is important? What is the difference? — Andrew D.
– Andrew D., Commented Aug 30, 2011 at 9:37

W Kristianto · Accepted Answer · 2013-04-10 06:11:52Z

2

I guess you run your test on Firefox. Modern versions of Firefox don't encode space character in hash url to %20 or +.

You can do a simply test just by adding a hash with spaces to any url.

Other browsers will automaticaly convert space to %20, but not modern Firefox. And there is nothing wrong about it and shouldn't make any problems in your app.

If you decode the hash using decodeURI or decodeURIComponent - the space will be decoded properly, so application will behave the same way like with %20.

The worst case is + character which is not decoded back to a space by decodeURI.

edited Apr 10, 2013 at 6:11

W Kristianto

9,3737 gold badges51 silver badges73 bronze badges

answered Aug 30, 2011 at 9:35

ytropek

8047 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BWG · Accepted Answer · 2011-08-30 09:20:12Z

1

Take a look at the following post. It has a test form where you can see the output of each of the Javascript encode functions:

http://www.the-art-of-web.com/javascript/escape/

There is also a good discussion about the techniques as well.

Cheers,

www.greyhound-computing.com

answered Aug 30, 2011 at 9:20

BWG

3264 silver badges16 bronze badges

Comments

WTK · Accepted Answer · 2011-08-30 09:53:45Z

1

The fact that the address bar is showing the unencoded characters doesn't mean that your data isn't properly encoded. Firefox (for example), can and will try to decode characters in the url address, to make it more human readable (I guess).

Even if you will input some encoded characters by hand, for example navigate to:

http://google.com?opt=test%20me%20or%20not

The url visible in the address bar will be "decoded" - you won't see %20.

EDIT: To get the plus sign instead of %20 you can manually replace spaces for those before using encodeURI:

var url = encodeURI("pqr xyz".replace(/\s/, '+'));

edited Aug 30, 2011 at 9:53

answered Aug 30, 2011 at 9:17

WTK

17.1k6 gold badges39 silver badges46 bronze badges

4 Comments

Rahul Over a year ago

In case of gmail its works fine. e.g suppose you searched "pqr xyz" then in the url "pqr+xyz" will be appended (Firefox).

WTK Over a year ago

But is this a problem of what is visible in the browser address bar, or do you have some problems accessing / manipulating that data?

Rahul Over a year ago

Thanks for example. i agree %20 will not be visible. so how can i achieve format like pqr+xyz after appending the encoded parameter.(same as gmail search or stackoverflow search). As in my case in the url space will appear which is nt a valid url (space is not allowed)

WTK Over a year ago

If you're insisting on using + character instead of %20 you can do something as simple as: var url = encodeURI("pqr xyz".replace(/\s/, '+'));

Collectives™ on Stack Overflow

How to append encoded parameters to the url using javascript?

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related