EN
JavaScript - get URL request parameters using custom logic
9
points
In this article, we would like to show you how to get URL request parameters in JavaScript using custom logic.
Note: to understand how the below example works, copy the code into your project.
Example index.html file:
<!doctype html>
<html>
<head>
<script src="request-parameters.js"></script>
</head>
<body>
<script>
console.log('------- by getParameters() -------');
var parameters = RequestParameters.getParameters();
for (var i = 0; i < parameters.length; ++i) {
var parameter = parameters[i];
console.log(parameter.name + ': ' + parameter.value);
}
console.log('------- by getParameter() --------');
var pageNumber = RequestParameters.getParameter('page-number', '1');
var pageSize = RequestParameters.getParameter('page-size', '20');
var dataOrder = RequestParameters.getParameter('data-order', 'A-Z');
console.log('page-number: ' + pageNumber);
console.log('page-size: ' + pageSize);
console.log('data-order: ' + dataOrder);
</script>
</body>
</html>
Example result:
Example request-parameters.js file:
// 'use strict';
(function (window) {
var PARAMETER_REGEX = /^([^=]+)(?:=(.*))?$/g;
function matchParameter(text) {
PARAMETER_REGEX.lastIndex = 0;
return PARAMETER_REGEX.exec(text);
}
function decodeComponent(part) {
if (part) {
return decodeURIComponent(part);
}
return null;
}
function parseParameters(search) {
var parameters = { };
var postfix = search.substring(1);
if (postfix) {
var parts = postfix.split('&');
for (var i = 0; i < parts.length; ++i) {
var part = parts[i];
if (part) {
var match = matchParameter(part);
if (match) {
var name = decodeComponent(match[1]);
parameters[name] = decodeComponent(match[2]);
}
}
}
}
return parameters;
}
window.RequestParameters = new function() {
var search = location.search;
var parameters = parseParameters(search);
this.getParameter = function(name, defaultValue) {
return parameters[name] || defaultValue;
};
this.getParameters = function() {
var result = [ ];
for (var key in parameters) {
result.push({name: key, value: parameters[key]});
}
return result;
};
};
})(window);