RegEx to split query string with native JS

Question

Where window.location.search is

?foo=myFoo&fooAndBar=myFoo%26Bar;bar=myBar

What regular expression would correctly split the string at its query separators? Note that ampersand (&) and semicolon (;) are both valid separators.

Sample use:

// slice() is used just to trim the leading "?"
window.location.search.slice(1).split(/ _WORKING_REGEX_ /);

>>> [object Array]:

    [0] => "foo=myFoo",
    [1] => "fooAndBar=myFoo&Bar",
    [2] => "bar=myBar"

I've found the correct match for ampersands, but not semicolons:

/&(?!\w+;)/

EDIT: T.J. Crowder pointed out that my error was in the original URL encoding of using & as an escaped ampersand where it would be correctly encoded instead as %26. Given that, the correct RegEx is much easier to match

window.location.search.slice(1).split(/[&;]/)

Here is the original test URL I posted before the correction for reference:

?foo=myFoo&fooAndBar=myFoo&amp;Bar;bar=myBar

Doesn't look like any of those solutions cover semicolons as asked. — novwhisky
– novwhisky, Commented Oct 9, 2013 at 21:21

T.J. Crowder · Accepted Answer · 2013-10-09 21:21:44Z

1

Note that ampersand (&) and semicolon (;) are both valid separators.

So, um:

var pairs = queryString.split(/[;&]/);

?

Or, to deal with the potential ? at the beginning:

var pairs = queryString.replace(/^\??/, '').split(/[;&]/);

answered Oct 9, 2013 at 21:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

5 Comments

T.J. Crowder Over a year ago

@NathanWitt: & does not represent an ampersand in a query string. Only in HTML. HTML != query string, completely distinct and unrelated notations.

novwhisky Over a year ago

@TJ it's not intended to, which is why your match creates a false-positive.

novwhisky Over a year ago

["foo=myFoo","fooAndBar=myFoo","amp","Bar","bar=myBar"]

T.J. Crowder Over a year ago

@NathanWitt: No. A query string containing the sequence & correctly decodes to having an amp entry. That's my point. & is not special in query strings. It's an ampersand (which is a separator), followed by amp, followed by a semicolon (which is kind of a separator, but not really). The notation &mumble; is HTML-specific and not used in query strings, as I said. (It's SGML-derived, I believe; SGML and HTML have nothing to do with query strings.) The correct way to put a literal ampersand in a query string is %26.

T.J. Crowder Over a year ago

Where you're running into trouble is understanding when things are parsed. In the HTML markup <a href="http://example.com?x=1&y=1">...</a>, the query string is not ?x=1&y=1, it's x=1&y=1. The & relates to how we write the HTML href attribute, not the query string. It's a way of writing that query string in an HTML attribute value, because in HTML attribute values (not query strings), & is the beginning of a character entity.

georg · Accepted Answer · 2013-10-09 21:26:56Z

1

this seems to work:

"?foo=myFoo&fooAndBar=myFoo&amp;Bar;bar=myBar".match(/(&\w+;|[^&;])+/g)
> ["?foo=myFoo", "fooAndBar=myFoo&amp;Bar", "bar=myBar"]

&\w+; to match entities is pretty naive, but you got the idea.

answered Oct 9, 2013 at 21:26

georg

216k57 gold badges324 silver badges401 bronze badges

Collectives™ on Stack Overflow

RegEx to split query string with native JS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related