Jquery: Get URL,Parameters and HashTag

Jquery: Get URL,Parameters and HashTag
by Janeth Kent Date: 27-06-2013 jquery url parameters hashtag javascript

While dealing with current URL, many time you want to know what is the current URL path, What are the parameters, and what is the hash tag on URL. Hash tag is pretty important, if you are implementing tab structure using HTML and JQuery. Now, both JavaScript and JQuery provides convenient way to retrieve current URL in form of window.location object. You can use various properties of window.location JavaScript object e.g. window.location.href to get complete URL, window.location.pathname to get current path, and window.location.hash to get hash tag from current URL. If you like to use JQuery then you can get window.location as JQuery object and retrieve relevant properties using attr() function. Being a fan of head first book, I always approach a new technology by an Head first title, it helped to learn a lot in short time, without spending time in trivial examples. By the way, In this web tutorial, we are going to retrieve current URL and hash tag using JavaScript and JQuery.

How to find current URL using JavaScript and JQuery.

In JavaScript, just use window.location.href, and in JQuery use code $(location).attr('href'), both will return current URL. In our another example url http://localhost:8080/testapp/, here window.location.href will return complete URL, but if you are just interested in path, than you can use window.location.path, which will return /testapp.
URL : "http://localhost:8080/testapp/" 
window.location.path = "/testapp/"
window.location.href = "http://localhost:8080/testapp/"
and if you want to get them using JQuery then use following code
var URL = $(location).attr('href'); var PATH = $(location).attr('pathname') 

In next section, we will learn how to get hash tag using JavaScript and JQuery.

How to get Hashtag from current URL using JavaScript and JQuery.

Hash tags are String with prefix # (hash) in URL. If you are using tab based UI and using div to represent different tab, and if you are current URL, when user is in tab2 is http://localhost:8080/testapp#tab2, then you can retrieve tab2 by using window.location.hash object. This will return just "tab2". You can also wrap same code in JQuery using shortcut $(). Here is the code :
 URL : http://localhost:8080/testapp#tab2 window.location.hash = tab2 var hash = $(location).attr('hash'); 
and here is the HTML page, which combines all these JavaScript and JQuery code. We have put the JQuery code in $(document).ready(), so it will be executed when page will be loaded.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
//windo.location.pathname will give you path, after http:// var path = window.location.pathname; alert("window.location.pathname : " + path);
var href = window.location.href; alert("window.location.href : " + href);
var hash = window.location.hash; alert("window.location.hash : " + hash);

//JQuery code for getting current URL var URL = $(location).attr('href'); alert("Current URL Using JQuery : " + URL);

Find current URL, path and hash value using JavaScript and JQuery it's very easy, you just need to know about window.location Javascript object, but if you are JQuery fan, and want to avoid cross browser hassles, then you can also take advantage of JQuery one liner$(location).attr("href") to get current URL or any attribute from location object.
by Janeth Kent Date: 27-06-2013 jquery url parameters hashtag javascript hits : 8050  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.


Related Posts

Vanilla JavaScript equivalent commands to JQuery

JQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling…

Is jQuery going to die in 2019?

For a while, JQuery's relevance has been a topic of debate among web developers. We were curious as web developers interested in Javascript to know what others have to say…

Best 5 Javascript NewsTicker Plugins

Not all developers know the marquee tag of HTML, that allows you to create a scrolling piece of text or image displayed that is shown horizontally or vertically on the DOM.…

Working with JSON in JavaScript

JSON is short for JavaScript Object Notation and an easy - to - access way to store information. In short, it gives us a collection of human - readable data…

Top 10 JavaScript Books 2019

Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications. If you're an aspiring web developer then…

6 JavaScript Utility Libraries you Should Know in 2019

Nowadays Javascript is the most popular and widely used programming language, so the ecosystem around it constantly grows. However, it is expected that the small "standard library" of Javascript will remain…

10 JavaScript podcasts for web developers

1. Syntax.fm  Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks…

JavaScript Manual for Beginners

The JavaScript Manual shows you how to use JavaScript and gives an overview of the language. I   GETTING STARTED ABOUT Created by Netscape in 1995 as an extension of HTML for Netscape Navigator…

Top JavaScript Libraries in 2018

As Javascript remains the most popular and widely used programming language in 2018, so grows the ecosystem around it. JavaScript has gained immense popularity over the span of a few years.…

30 Reference Guides for JavaScript: jQuery, Node.js, and React

This is a list intended to introduce new developers to JavaScript (jQuery, Node.js and React) and help experienced developers learn more.   jQuery jQuery API (Official) View → jQuery Cheatsheet (Devhints) View → jQuery Cheat Sheet (JavaScript Toolbox) View → jQuery Quick…

Useful Terminal Commands Every Web Developer Should Know About

The command line interface (CLI), or Terminal is considered by many to be the Holy Grail of computer management. At one time the CLI was the only way to accomplish…

Useful jQuery code snippets for responsive websites

When you have to manage a web project, jQuery can be of great help. In this article, we have compiled some jQuery tips and tricks for making and enhancing responsive…