Remove plus sign (+) in URL query string

Question

I am trying get the string in the following URL to display on my webpage.

http://example.com?ks4day=Friday+September+13th

EDIT: The date in the URL will change from person to person as it's merged in by my CRM program.

I can get it to display on my webpage using the code below, the problem is the plus signs (+) come through as well.

eg. Friday+September+13th

What I need it to do is replace the plus signs (+) with spaces so it looks like this:

eg. Friday September 13th

I'm new to this so I'm having some trouble working it out.

Any help would be appreciated.

This is the code i'm using in a .js file

      function qs(search_for) {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i<parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0  && search_for == parms[i].substring(0,pos)) {
            return parms[i].substring(pos+1);;
        }
    }
    return "";
}

This is the code i'm using on my webpage to make it display

     <script type="text/javascript">document.write(qs("ks4day"));</script>

`str.replace('+', ' ');` would replace `+` with a space in the provided string. — James Coyle, Sep 10 '13 at 11:22
`decodeURIComponent("Is+it+friday+the+13th%3F").replace(/\+/g, " ")` — Salman A, Sep 10 '13 at 11:31
Possible duplicate of [Replacing all plus symbols in JavaScript String](http://stackoverflow.com/questions/16485653/replacing-all-plus-symbols-in-javascript-string) — MDEV, Sep 10 '13 at 11:35
@SalmanA - Other way around: `decodeURIComponent("1+%2B+2+%3D+3".replace(/\+/g, '%20'))` otherwise you decode the "%2B" incorrectly — cloudfeet, Sep 10 '13 at 11:53
@user2764485 You should do the `.replace(/\+/g, " ")` FIRST, not last, as @cloudfeet described above. Otherwise a properly-encoded plus sign will be replaced with a space, incorrectly! — razzed, Jun 01 '16 at 16:15

score 141 · Answer 1 · answered Jun 25 '14 at 19:54

141

Although Bibhu's answer will work for this one case, you'll need to add decodeURIComponent if you have encoded characters in your URI string. You also want to make sure you do the replace before the decode in case you have a legitimate + in your URI string (as %2B).

I believe this is the best general way to do it:

var x = qs("ks4day");        // 'Friday+September+13th'
x = x.replace(/\+/g, '%20'); // 'Friday%20September%2013th'
x = decodeURIComponent(x);   // 'Friday September 13th'

Here's an example of when it might be useful:

var x = '1+%2B+1+%3D+2'; 
x = x.replace(/\+/g, '%20'); // '1%20%2B%201%20%3D%202'
x = decodeURIComponent(x);   // '1 + 1 = 2'

answered Jun 25 '14 at 19:54

Luke

18,811
16
99
115

I found this question when looking for help specifically with plus signs. Even though I was already decoding with Node's unescape function, that function doesn't decode plus signs. This answer is the helpful one to me, and probably to most people who end up here. – Travis Wilson Jan 02 '19 at 20:21
Thank you! I was not aware of the decodeURIComponent() function. – Quintin Dec 17 '19 at 17:22
Perfectly working for me. It is avoiding of following changes when you are using ajax to get input values. 1). Space into plus sign. 2). plus sign into %20 – Billu Nov 09 '20 at 18:51

Bibhu · Answer 2 · 2013-09-10T11:48:20.733

12

You can use replace() for this purpose

var dateString = 'Friday+September+13th';
var s = dateString .replace(/\+/g, ' ');

edited Sep 10 '13 at 11:48

answered Sep 10 '13 at 11:22

Bibhu

4,053
4
33
63

score 12 · Answer 3 · answered Jul 12 '19 at 06:51

12

Parsing strings using regex is often prone to so many errors. Thankfully all modern browsers provide URLSearchParams to handle params from url strings in a proper way:

var params = new URLSearchParams(window.location.search);
var value = params.get('ks4day');
// "Friday September 13th"

Ps: There is also a good polyfill for old browsers.

answered Jul 12 '19 at 06:51

Pratyush

5,108
6
41
63

1

this is definitely the best answer, the other ones are at least outdated – Antoine Mar 28 '20 at 15:05
2

Using native implementation is always best. For sure the best answer as of 2020. – cyqsimon May 14 '20 at 06:22

score 1 · Answer 4 · answered Jul 20 '20 at 20:38

1

Have you tried https://www.npmjs.com/package/querystring ?

import { parse } from 'querystring'; 
parse('ks4day=Friday+September+13th')

returns

{ 'ks4day': 'Friday September 13th' }

Assuming you are using something like Webpack that knows how to process import statements

answered Jul 20 '20 at 20:38

Marcellin Nshimiyimana

11
1

Simple and best . – R.singh Feb 23 '22 at 06:58

boky · Accepted Answer · 2020-12-16T09:38:45.633

-2

If that's what you are doing, the plus sign will not be the only one that is going to give you a hard time. The apostrophe ('), equals (=), plus (+) and basically anything not in the permitted URL characters (see Percent-encoding @ Wikipedia) is going to get escaped.

You are most likely looking for the decodeURIComponent function.

edited Dec 16 '20 at 09:38

answered Sep 10 '13 at 11:29

boky

815
5
10

Also check documentation on decodeURI(): http://www.w3schools.com/jsref/jsref_decodeuri.asp – boky Sep 10 '13 at 11:38
35

@SalmanA - You should replace "+" *before* decodeURIComponent, not after - otherwise you'll incorrectly decode "%2B" to " ". – cloudfeet Sep 10 '13 at 11:51
5

Woo Hoo. Got it working Using the decodeURIComponent. eg. – user2764485 Sep 10 '13 at 11:56
1

What if you have a phone number with country code in that string? Replace is the worst possible option. decode doesn't remove pluses. – deb0rian Jul 31 '14 at 14:20
@Fratyr, could you please provide an example with phone number? As far as I see currently the proper answer will not have any issue with that. – Victor Yarema Nov 21 '16 at 17:45
1

@user2764485, You can't do a replace after decoding because you'll be decoding "%2b" to " ". And that is wrong. – Victor Yarema Nov 21 '16 at 17:47
@deb0rian I believe plus signs should be encoded as `%2B`. Plus signs are used to encode spaces in the query string so they should't be used literally. – Cave Johnson Oct 29 '18 at 23:38

Remove plus sign (+) in URL query string

5 Answers5

Linked

Related