Need explanation on Javascript regex request parameter parsing
-
27-06-2021 - |
Question
Examples first, questions second...
Example 1) Non global match of '?sort=alpha&direction=asc'
'?sort=alpha&direction=asc'.match(/([^?&=]+)(=([^&]*))?/);
Output:
// ['sort=alpha', 'sort', '=alpha', 'alpha']
Example 2) Global match of '?sort=alpha&direction=asc'
'?sort=alpha&direction=asc'.match(/([^?&=]+)(=([^&]*))?/g);
Output:
// ['sort=alpha', 'sort', '=alpha', 'alpha']
Example 3) Global match replace of '?sort=alpha&direction=asc'
getRequestParameters: function () {
var query_string = {},
regex = new RegExp('([^?=&]+)(=([^&]*))?', 'g');
'?sort=alpha&direction=asc'.replace(regex, function(match, p1, p2, p3, offset, string) {
console.log(match, p1, p2, p3, offset, string);
query_string[p1] = p3;
});
}
Output:
// sort=alpha sort =alpha alpha 1 ?sort=alpha&direction=asc
// direction=asc direction =asc asc 12 ?sort=alpha&direction=asc
My Questions
I am not sure if I could have ever figured this one out on my own, but I never "live" with a solution and I must figure out the rhyme behind the reason. The specific matches I think understand "fully enough". I believe I know some of the answers below, but I rather not make assumptions and learn from smarter people!
- Why are 1) and 2) the same? (or are they?)
- What does the 'sort=alpha' mean in 1) and 2)?
- Why does 2) not return both sort and direction parameters?
- What is the 3) iterating over with the .replace()?
- Is there a way of capturing N parameters without .replace()?
Thanks!
update
var regex = new RegExp('([^?&=]+)(=([^&]*))?');
regex.exec('?sort=alpha&direction=asc');
// Chrome 21 - ["sort=alpha", "sort", "=alpha", "alpha"]
var regex = new RegExp('([^?&=]+)(=([^&]*))?', 'g');
regex.exec('?sort=alpha&direction=asc');
// Chrome 21 - ["sort=alpha", "sort", "=alpha", "alpha"]
'?sort=alpha&direction=asc'.match(/([^?&=]+)(=([^&]*))?/);
// Chrome 21 - ["sort=alpha", "sort", "=alpha", "alpha"]
'?sort=alpha&direction=asc'.match(/([^?&=]+)(=([^&]*))?/g);
// Chrome 21 - ["sort=alpha", "direction=asc"]
var regex = new RegExp('([^?&=]+)(=([^&]*))?', 'g');
regex.lastIndex = 11;
regex.exec('?sort=alpha&direction=asc');
// Chrome 21 - ["direction=asc", "direction", "=asc", "asc"]
In summary, Example 3) is still correct, but go to this answer for a more qualified response.
end update
References and thanks to Steven Benner:
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace
- http://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
- http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx (similar topic so I threw it in)
Solution
Answers first, question afterwards:
- In both Chrome 21 and Firefox 14 I get
["sort=alpha", "direction=asc"]
for theg
version - so they are not the same at all. - The first returned value from
match
is the entire matched string (in this case one or more characters that are not an ampersand, question mark or equal sign optionally followed by an equal sign and zero or more characters that are not an ampersand). - It does (see answer to #1) - what browser are you running these tests in?
replace
is iterating over each match it finds in the string.Use multiple calls to
exec
or use the existing regex you have:> '?sort=alpha&direction=asc&another=value'.match(/([^?&=]+)(=([^&]*))?/g); ["sort=alpha", "direction=asc", "another=value"]
What browser are you using that gave you the results you provided for your first questions?
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow