• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • VBA
  • About
You are here: Home / jQuery / Using jQuery to Get the Current URL

Using jQuery to Get the Current URL

January 24, 2022 Leave a Comment

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:

Update URL

The information contained in the URL is: Nothing yet…

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.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Get Value of Select On Change
  • 2.  Get the Window Scroll Position Using jQuery
  • 3.  jQuery on change
  • 4.  jQuery slideUp – How to Slide Up and Hide an Element Using jQuery
  • 5.  Changing the Background Image of a div Using jQuery
  • 6.  Using jQuery to Set the Id of a Div
  • 7.  jQuery mousedown – An Interactive Example of the jQuery mousedown Method
  • 8.  jQuery rotate – How to Rotate an Image using jQuery
  • 9.  Using jQuery to Show a Div
  • 10.  How to use jQuery to Make an Input Field readonly

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

The Programming Expert is a compilation of hundreds of code snippets to help you find solutions to your problems in Python, JavaScript, PHP, HTML, SAS, and more.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2022 · The Programming Expert · About · Privacy Policy