Languages
[Edit]
EN

JavaScript - how to get url request parameters in JavaScript?

6 points
Created by:
JustMike
3488

In JavaScript it is possible to get url request parameters using following logic.

1. Url request parameters logic example

index.htm file:

<!doctype html>
<html lang="en">
<head>
  <script src="request-parameters.js"></script>
</head>
<body>
  <script>

	function getAllRequestParameters() {
		var result = '----------All request parameters...<br />';
			
		RequestParameters.iterateParameters(function(name, value) {
			result += name + ': ' + value + '<br />';
		});
		
		result += '--------------------------------------<br />';
		
		return result;
	}

	function getPageRequestParameters() {
		var pageNumber = RequestParameters.getParameter('page-number', '1');
		var pageSize = RequestParameters.getParameter('page-size', '20');
		var pageOrdering = RequestParameters.getParameter('page-ordering', 'A-Z');
	
		var result = 'page-number: ' + pageNumber + ', ' 
			+ 'page-size: ' + pageSize + ', ' 
			+ 'page-ordering: ' + pageOrdering
			+ '<br />';

		return result;
	}
	
	document.body.innerHTML += getAllRequestParameters();
	document.body.innerHTML += getPageRequestParameters();

  </script>
</body>
</html>

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(request) {
        var parameters = {};

        var postfix = request.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() {
        // variables

        var parameters; // parsed and decoded parameters

        // internal logic

        var search = window.location.search;

        if (search)
            parameters = parseParameters(search);

        else
            parameters = {};

        // public methods

        this.getParameter = function getParameter(name, defaultValue) {
            return parameters[name] || defaultValue;
        };

        this.iterateParameters = function iterateParameters(action) {
            for (var el in parameters) {
                var value = parameters[el];

                action(el, value);
            }
        };
    };
})(window);

Result:

JavaScript request parameters logic usage example.
JavaScript request parameters logic usage example.

See also

  1. JavaScript - how to get, set, and manage url hash parameters?

Merged questions

  1. PHP $_GET parameters in JavaScript
  2. How to get PHP $_GET parameters in JavaScript?
  3. How to get query string values in JavaScript?

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.