• 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 / JavaScript / Using JavaScript to Get the Current URL

Using JavaScript to Get the Current URL

January 25, 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 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 id="click-me" onclick="updateURL()">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 innerHTML property. This 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, ' ');
  document.getElementById("urlText").innerHTML = keywordWithoutSpaces;
}

function updateURL() {
  //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 + "#" + document.getElementById("textInput").value;
    window.open(newURL, "_self");
    location.reload();
  } else {
    var newURL = url + "#" + document.getElementById("textInput").value;
    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 id="click-me" onclick="updateURL()">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, ' ');
  document.getElementById("urlText").innerHTML = keywordWithoutSpaces;
}

function updateURL() {
  //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 + "#" + document.getElementById("textInput").value;
    window.open(newURL, "_self");
    location.reload();
  } else {
    var newURL = url + "#" + document.getElementById("textInput").value;
    window.open(newURL, "_self");
    location.reload();
  }
};

</script>

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

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Get the Scroll Position
  • 2.  Using JavaScript to Reverse a Number
  • 3.  Get the Size of a Set in JavaScript
  • 4.  Using JavaScript to Get the Host URL
  • 5.  Set Text with the textContent Property in JavaScript
  • 6.  Using JavaScript to Check if a Number is Divisible by 2
  • 7.  JavaScript sinh – Find Hyperbolic Sine of Number Using Math.sinh()
  • 8.  How to Remove Non Numbers From String in JavaScript
  • 9.  JavaScript slice – How to Get a Substring From a String
  • 10.  How to Check if a Number is Even or Odd in JavaScript

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