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
– James Coyle, Commented Sep 10, 2013 at 11:22
decodeURIComponent("Is+it+friday+the+13th%3F").replace(/\+/g, " ") — Salman Arshad
– Salman Arshad, Commented Sep 10, 2013 at 11:31
Possible duplicate of Replacing all plus symbols in JavaScript String — MDEV
– MDEV, Commented Sep 10, 2013 at 11:35
@SalmanA - Other way around: decodeURIComponent("1+%2B+2+%3D+3".replace(/\+/g, '%20')) otherwise you decode the "%2B" incorrectly — cloudfeet
– cloudfeet, Commented Sep 10, 2013 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
– razzed, Commented Jun 1, 2016 at 16:15

Luke · Accepted Answer · 2014-06-25 19:54:18Z

143

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, 2014 at 19:54

Luke

20.3k16 gold badges111 silver badges121 bronze badges

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

3 Comments

Travis Wilson Over a year ago

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.

Quintin Over a year ago

Thank you! I was not aware of the decodeURIComponent() function.

Muhammad Bilal Over a year ago

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

Pratyush · Accepted Answer · 2019-07-12 06:51:25Z

13

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, 2019 at 6:51

Pratyush

5,5587 gold badges43 silver badges67 bronze badges

2 Comments

Antoine Over a year ago

this is definitely the best answer, the other ones are at least outdated

cyqsimon Over a year ago

Using native implementation is always best. For sure the best answer as of 2020.

Bibhu · Accepted Answer · 2013-09-10 11:48:20Z

12

You can use replace() for this purpose

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

edited Sep 10, 2013 at 11:48

answered Sep 10, 2013 at 11:22

Bibhu

4,1014 gold badges35 silver badges64 bronze badges

Comments

Marcellin Nshimiyimana · Accepted Answer · 2020-07-20 20:38:46Z

0

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, 2020 at 20:38

Marcellin Nshimiyimana

91 bronze badge

1 Comment

R.singh Over a year ago

Simple and best .

boky · Accepted Answer · 2020-12-16 09:38:45Z

-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, 2020 at 9:38

answered Sep 10, 2013 at 11:29

boky

8455 silver badges10 bronze badges

7 Comments

boky Over a year ago

Also check documentation on decodeURI(): w3schools.com/jsref/jsref_decodeuri.asp

cloudfeet Over a year ago

@SalmanA - You should replace "+" before decodeURIComponent, not after - otherwise you'll incorrectly decode "%2B" to " ".

user2764485 Over a year ago

Woo Hoo. Got it working Using the decodeURIComponent. eg. <script type="text/javascript">document.write(decodeURIComponent(qs("ks4day")).replace(/‌\+/g, " "));</script>

deb0rian Over a year ago

What if you have a phone number with country code in that string? Replace is the worst possible option. decode doesn't remove pluses.

Victor Yarema Over a year ago

@user2764485, You can't do a replace after decoding because you'll be decoding "%2b" to " ". And that is wrong.

|

Collectives™ on Stack Overflow

Remove plus sign (+) in URL query string

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related