• 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
  • Ruby
  • 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.  jQuery get img src – Get the Source of an Image Using jQuery
  • 2.  Using jQuery to Convert a String to Uppercase
  • 3.  Using jQuery to Get Element by ID
  • 4.  Using jQuery to get Textarea Value
  • 5.  jQuery Compare Dates
  • 6.  jQuery Opacity – How to Change the Opacity of an Element
  • 7.  jQuery keydown Method
  • 8.  Get the Height of a Div Using jQuery
  • 9.  jQuery Display None
  • 10.  Using jQuery to Set a Radio Button to Checked

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

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

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 © 2023 · The Programming Expert · About · Privacy Policy