JavaScript and URL Parameters

When a URL has a question mark (?) after it, then the ? and anything following it is a URL parameter.

Here is an example URL with a parameter.

https://example.com/?will=good&coding=fun

Parameters can be composed of any keyboard characters.

Generally, a parameter is composed of one or more name=value pairs. When the parameter contains more than one name=value pair, the pairs are separated with an ampersand (&). An example is in source code above and further below.

When the URL in the browser's address bar contains parameter information, JavaScript can extract the info.

The entire parameter is stored in the JavaScript variable location.search (including the leading ? character). In the above example, the value of location.search is:

?will=good&coding=fun

JavaScript built-in string functions can be used to do things with the location.search value. What a person can do is pretty much anything a person can do with string values.

For the article example, we'll publish any browser address bar URL parameter information on the web page.

The example requires that the article page is loaded using a URL with a parameter. Tap here to load this page with the example parameter. You may also use your own parameter to see the example respond with your information.

Probably, at this point, you have ideas in mind for using parameter information in your projects. To help with that, here is the source code of the entire example.

<!-- This is the div where any parameter information will be inserted. -->
<div id="article-example" style="outline:1px solid gold; padding:.2em 1em; width:fit-content;">
<p>Parameter information (if any) is here:</p>
</div>

<script type="text/javascript">
// Let's get the element created for the information.
var paramdiv = document.getElementById("article-example");
// Test if there is any parameter information past the ? character.
if( location.search.length>1 )
{
   // Copy the parameter information. Use substring() to drop off the ? character.
   var paraminfo = location.search.substring(1);
   // Separate the name=value sets into an array.
   var paramsets = paraminfo.split("&");
   // Publish the name and value of each set into the div created for the information.
   //   Use a loop so each set can be addressed by itself.
   for( var i=0; i<paramsets.length; i++ )
   {
      // separate the set at its = character.
      var temparray = paramsets[i].split("=");
      // temparray[0] contains what was before the = character.
      // temparray[1] contains what was after the = character.
      // Now, let's add the information to the div that was prepared for it.
      //   We'll put the information between p tags for visual spacing and bold parameter information.
      paramdiv.innerHTML += "<p>Name <b>" + temparray[0] + "</b> has value <b>" + temparray[1] + "</b>.</p>";
   } // end the loop
   // All done :)
}
// Otherwise (if no parameter information), put a "no info" message into the div.
else { paramdiv.innerHTML += "<p>No parameter information detected.</p>"; }
</script>

You'll notice that the div id value article-example is also named in the JavaScript (second line after the script tag). That tells the JavaScript where to publish the parameter information.

The JavaScript is documented so you can see what is going on.

The example code represents one way a URL parameter can be utilized with JavaScript.

The location.search value contains the parameter (if any). It is a string value. The value can be used like any other string value.

(This content first appeared in Possibilities newsletter.)

Will Bontrager