How to Extract the Current URL and ID in jQuery? - javascript

How would I go about getting the current URL using jquery, or more specifically, getting an ID on the end of it?
For example, I have product.php#tab-2. What I want to get from it is just the '#tab-2' part.
I have tried 'window.location.pathname' but that will only return '/product.php'
Thanks

You don't need jQuery for this:
alert(window.location.href); // will give you the full url
alert(window.location.hash); // will give you the hash (#) value
See the Mozilla docs at window.location - MDC.

You want window.location.hash

Use jqUrl plugin (http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html) to retrieve the full current url, then strip the window.location.pathname part.
Thomas

To actually assign to a variable, use the following;
var url = window.location.href;
var id = url.substring(url.lastIndexOf('#') + 1);
Note that if your url is in this format /product.php/3 , then you can use the above code, just change the character is the lastIndexOf function.

Related

Use URL Parameter to call a line of text using JS?

I'm hoping to call a line of text by using a simple URL parameter. Say I had an ordered list in javascript and on load of url example.com/?i=14 would get the 14th line in my list and place it where desired.
How can I achieve this?
I'm not sure what you mean by "call a line of text," but maybe you could do this:
var url = window.location.href;
var queryPos = url.indexOf('i=');
var param = url.substr(queryPos + 'i='.length);
Now param will contain the value of the parameter and you could use it to fetch whatever.
But since you're trying to access a value from a URL with JavaScript, it might be better to make use of # as explained here: How do I get the value after hash (#) from a URL using jquery (there are non-jquery answers as well)
Hopefully this is what you need.
To place an array element where you need it on document load
<div id="placeHere"></div>
In JS
document.body.onload = function(){
document.getElementById('placeHere').innerHTML = array[14];
}
jQuery
$(document).ready(function(){
$('#placeHere').html(array[14]);
})

JavaScript - return length of current URL

I've been searching and I can't find a JavaScript method or anything that may give me the length of the URL of the page currently shown. It would be helpful for a little project of mine. Any ideas?
Just get the length of the URL by using .length:
location.href.length
Try the following:
alert(document.URL.length);
The location.href returns the length of the whole URL. If you need to find the URL size with out the http:// just subtract from the x.length.
var x = location.href;
alert(x.length);

Getting the #id from current URL

I'm looking for a way to retrieve the #anchor part from the current URL with JavaScript.
For example:
http://my-page.com/index.html#contact-us
Would return contact-us.
I could split the URI at the eventual # and then take the last piece, but I'm looking for a somewhat nicer and cleaner suggestion. A native (jQuery?) function would be great, but I guess I'm asking for too much.
Use location.hash:
location.hash.slice(1);
It starts with a #, hence .slice(1). Given an arbitrary string, you can use the built-in URL-parsing feature by creating a <a> element, and set the href, then read other properties, such as protocol, hostname, hash, etc. jQuery example:
$('a').attr('href', url)[0].hash;
location.hash.replace(/^#/, "")
If you work with a variable:
var url = "http://my-page.com/index.html#contact-us";
var hash = url.substring(url.indexOf("#") + 1);

Why does URL Hash is added instead of being replaced?

When using a url like this:
http://localhost/nafham/?selection/12/24/122
The hashing is done in that manner:
http://localhost/nafham/?selection/12/24/122#?selection/12/24/122/الصف-الثالث-الثانوي/السنة-كاملة/الاقتصاد/self
However when any other part added to the URL, example:
http://localhost/nafham/?selection/12/24/122/test
The hash is added again on each action
http://localhost/nafham/?selection/12/24/122/test#?selection/12/24/122/الصف-الثالث-الثانوي/السنة-كاملة/الاقتصاد/self
http://localhost/nafham/?selection/12/24/122//test#?selection/12/24/122/test#?selection/12/24/93/الصف-الثالث-الثانوي/السنة-كاملة/الاقتصاد/self
Any idea why the Hash is added to the URL instead of replacing the current hash value?
Because you are using the part of the URL when you set the hash.
Use location.hash = "...". It should work.

Javascript & HTML Getting the Current URL

Can anyone help me. I don't use Client-side Javascript often with HTML.
I would like to grab the current url (but only a specific directory) and place the results between a link.
So if the url is /fare/pass/index.html
I want the HTML to be pass
This is a quick and dirty way to do that:
//splits the document.location.href property into an array
var loc_array=document.location.href.split('/');
//have firebug? try a console.log(loc_array);
//this selects the next-to-last member of the array.
var directory=loc[loc.length-2]
url = window.location.href // Not particularly necessary, but may help your readability
url.match('/fare/(.*)/index.html')[1] // would return "pass"
There may be an easier answer, but the simplest thing I can think of is just to get the current URL with window.location and use some type of parsing to get which directory you are looking for.
Then, you can dynamically append the HTML to your page.
This may get you started:
var linkElement = document.getElementById("whatever");
linkElement.innerHTML = document.URL.replace(/^(?:https?:\/\/.*?)?\/.*?\/(.*?)\/.*?$/i,"$1");

Categories