Languages
[Edit]
EN

JavaScript - how to get url request parameters in JavaScript?

9 points
Created by:
JustMike
29250

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

Note: to see better how below example works copy code into your project.

1. Url request parameters logic example

index.htm file:

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
<head>
  <script>

    // '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 = window.location.search;
            var parameters = search ? parseParameters(search) : { };
            this.getParameter = function getParameter(name, defaultValue) {
                return parameters[name] || defaultValue;
            };
            this.getParameters = function getParameters() {
                var result = [ ];
                for (var key in parameters) {
                    result.push({ name: key, value: parameters[key] });
                }
                return result;
            };
        };
    })(window);

  </script>
</head>
<body>
  <pre id="result"></pre>
  <script>

	function getAllRequestParameters() {
        var parameters = RequestParameters.getParameters();

      	var result = '';
		for (var i = 0; i < parameters.length; ++i) {
            result += name + ': ' + value + '<br />';
        }
	
      	return '------- ALL REQUEST PARAMETERS -------<br />' +
               result +
		       '--------------------------------------<br />';
	}

	function getPaginationRequestParameters() {
		var pageNumber = RequestParameters.getParameter('page-number', '1');
		var pageSize = RequestParameters.getParameter('page-size', '20');
		var pageOrdering = RequestParameters.getParameter('page-ordering', 'A-Z');
	
		return 'page-number: '   + pageNumber   + ', ' +
			   'page-size: '     + pageSize     + ', ' +
			   'page-ordering: ' + pageOrdering +
			   '<br />';
	}
    
    var result = document.querySelector('#result');
	
	result.innerHTML += getAllRequestParameters();
	result.innerHTML += getPaginationRequestParameters();

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

Example 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?

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join