Using jQuery to Get the Current URL

To get the URL of the current page we are on, we can use the JavaScript window.location object and get the href property of it. So the property window.location.href would return the current URL that you see at the top of your browser.

var currURL = window.location.href;

As we will see in the example below, it can be very useful to get the current URL of a webpage. A lot of times we can put extra information in a url, and then use JavaScript and jQuery to extract that information and use it to influence the content of the webpage. Let’s take a look.

Get the Current URL and Display the Information Contained in it

We will have 2 steps in this example. In the first step, we will let the user input some text, and then add that text to our URL and refresh the page.

In the second step, we will extract the parameter we added from the URL and then display it in a div. Let’s take a look at the simple HTML setup.

<div id="div1">
  <input type="text" id="textInput">
  <div class="click-me">Update URL</div>
  <div id="result">The information contained in the URL is: <b><span id="urlText">Nothing yet...</span></b></div>
</div>

The methods needed to pull this off will be the Javascript indexOf(), substring (), replace(), and the jQuery text() method. This is along with the window.location.href property we talked about above.

Here is the JavaScript code:

var url = window.location.href;
//See if parameter exist in URL
if( url.indexOf('#') != -1 ){
  var keywordIndex = url.indexOf('#');
  var longKeyword = url.substring(keywordIndex+1);
  //Replace any URL coded spaces with actual spaces
  var keywordWithoutSpaces = longKeyword.replace(/%20/g, ' ');
  $('#urlText').text(keywordWithoutSpaces);
}

$('.click-me').click(function(){
  //If the below statement is true, it means there already is a parameter in the URL
  if( url.indexOf('#') != -1 ){
    //We will clear it and add our new text
    var plainURL = url.substring(0,url.indexOf('#'));
    var newURL = plainURL + "#" + $("#textInput").val();
    window.open(newURL, "_self");
    location.reload();
  } else {
    var newURL = url + "#" + $("#textInput").val();
    window.open(newURL, "_self");
    location.reload();
  }
});

The final code and output for this example is below:

Code Output:

Full Code:

<div id="div1">
  <input type="text" id="textInput">
  <div class="click-me">Update URL</div>
  <div id="result">The information contained in the URL is: <b><span id="urlText">Nothing yet...</span></b></div>
</div>

<script>

var url = window.location.href;
//See if parameter exist in URL
if( url.indexOf('#') != -1 ){
  var keywordIndex = url.indexOf('#');
  var longKeyword = url.substring(keywordIndex+1);
  //Replace any URL coded spaces with actual spaces
  var keywordWithoutSpaces = longKeyword.replace(/%20/g, ' ');
  $('#urlText').text(keywordWithoutSpaces);
}

$('.click-me').click(function(){
  //If the below statement is true, it means there already is a parameter in the URL
  if( url.indexOf('#') != -1 ){
    //We will clear it and add our new text
    var plainURL = url.substring(0,url.indexOf('#'));
    var newURL = plainURL + "#" + $("#textInput").val();
    window.open(newURL, "_self");
    location.reload();
  } else {
    var newURL = url + "#" + $("#textInput").val();
    window.open(newURL, "_self");
    location.reload();
  }
});

</script>

Hopefully this article has been useful to help you understand how to get the current URL.