Extract parameter from url path in javascript - javascript

I want to extract a part of an url path but i don't know how to do that.
I want to get a value (3252) from a path like this:
/forums/0-3252-1-1-my-topic-title.htm
How can i do that ?
Thank you

If you want to work with URL there is a powerful tool on which you can reply and that is JavaScript Window Location.
The window.location object can be used to get the current page address (URL).
The window.location object have many properties or method.
Some examples:
window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of the current page
window.location.protocol returns the web protocol used (http: or https:)
window.location.assign() loads a new document
Example:
Display the href (URL) of the current page:
<script>
alert(window.location.href);
</script>
Follow link to read more: Window Location

Related

Redirect to different URL when current URL contains some string

I have a requirement wherein I need to redirect my page to a different URL when my current URL contains some string.
For instance,
If my current URL contains www.testdomain.com or www.testdomain.com/web/region then it should redirect to www.testdomain.com/group/region. I tried the below code but it returns "The requested resource could not be found -- https://www.testdomain.com/web/region/testdomain.com/group/region".
$(document).ready(function() {
if (window.location.href.indexOf("web/region") > -1) {
window.location.href=window.location.hostname+'/group/region';
}
})
It is adding the URL twice here. But when I pass the direct URL window. location.href="www.testdomain.com/group/region" it is working.
Can someone guide me on how do I force redirect my page if the URL contains www.testdomain.com or www.testdomain.com/web/region?
Thanks
Start with // so that the browser knows it's not a relative URI:
window.location.href = '//' + window.location.hostname+'/group/region';
You can also prepend the protocol:
window.location.href = window.location.protocol + '//' + window.location.hostname+'/group/region';
It's adding the URL twice because browsers interpret /group/region as a relative path, automatically prepending the current domain UNLESS otherwise specified. (Maybe others can explain why window.location.hostname doesn't immediately return, thus preventing the browser from assuming a relative path?)
Example: If you explicitly set a domain, the browser will redirect to it as expected.
window.location.href='http://www.google.com/'
Otherwise, if you take away "www."
window.location.href='google.com/'
Your browser will redirect to "www.testdomain.com/google.com", appending the string.
The fix is simple.
Just delete window.location.hostname+ and it will only return the URL once.
Or... for a better user experience, I would suggest using window.location.replace() which DOES NOT save the current page in session history.(You don't want to go back, just to be redirected again!)
SOLUTION:
Replace your return block with this.
window.location.replace('/group/region')

window.open adds page after a url not replace it

var urladdress = 'autopage
I used window.open(urladdress, "_self"); to load a new url but it was adding urladdress to existing address within the browser i.e.
current url within the browser is https://currenturl.com/currentpage/ I want to load a new page autopage so expected url is https://currenturl.com/autopage/
but using window.open(urladdress, "_self"); leads to https://currenturl.com/currentpage/autopage/.
Please how can i achieve that
The problem stems from your "urladdress" variable.
Writing your link like this "link" will just add it to the current active path.
If you want to always end up in "www.example.com/link" just add an "/" before your path ("/autopage" in your example).

Javascript How to check if the page opened is Home Page [duplicate]

All I want is to get the website URL. Not the URL as taken from a link. On the page loading I need to be able to grab the full, current URL of the website and set it as a variable to do with as I please.
Use:
window.location.href
As noted in the comments, the line below works, but it is bugged for Firefox.
document.URL
See URL of type DOMString, readonly.
URL Info Access
JavaScript provides you with many methods to retrieve and change the current URL, which is displayed in the browser's address bar. All these methods use the Location object, which is a property of the Window object. You can read the current Location object by reading window.location:
var currentLocation = window.location;
Basic URL Structure
<protocol>//<hostname>:<port>/<pathname><search><hash>
protocol: Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL))
hostname: Host name specifies the host that owns the resource. For example, www.stackoverflow.com. A server provides services using the name of the host.
port: A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server.
pathname: The path gives info about the specific resource within the host that the Web client wants to access. For example, /index.html.
search: A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed).
hash: The anchor portion of a URL, includes the hash sign (#).
With these Location object properties you can access all of these URL components and what they can set or return:
href - the entire URL
protocol - the protocol of the URL
host - the hostname and port of the URL
hostname - the hostname of the URL
port - the port number the server uses for the URL
pathname - the path name of the URL
search - the query portion of the URL
hash - the anchor portion of the URL
origin - the window.location.protocol + '//' + window.location.host
I hope you got your answer..
Use window.location for read and write access to the location object associated with the current frame. If you just want to get the address as a read-only string, you may use document.URL, which should contain the same value as window.location.href.
Gets the current page URL:
window.location.href
OK, getting the full URL of the current page is easy using pure JavaScript. For example, try this code on this page:
window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"
The window.location.href property returns the URL of the current page.
document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<p id="root"></p>
</body>
</html>
Just not bad to mention these as well:
if you need a relative path, simply use window.location.pathname;
if you'd like to get the host name, you can use window.location.hostname;
and if you need to get the protocol separately, use window.location.protocol
also, if your page has hash tag, you can get it like: window.location.hash.
So window.location.href handles all in once... basically:
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
//true
Also using window is not needed if already in window scope...
So, in that case, you can use:
location.protocol
location.hostname
location.pathname
location.hash
location.href
To get the path, you can use:
console.log('document.location', document.location.href);
console.log('location.pathname', window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL
Open Developer Tools, type in the following in the console and press Enter.
window.location
Ex: Below is the screenshot of the result on the current page.
Grab what you need from here. :)
Use: window.location.href.
As noted above, document.URL doesn't update when updating window.location. See MDN.
Use window.location.href to get the complete URL.
Use window.location.pathname to get URL leaving the host.
You can get the current URL location with a hash tag by using:
JavaScript:
// Using href
var URL = window.location.href;
// Using path
var URL = window.location.pathname;
jQuery:
$(location).attr('href');
For complete URL with query strings:
document.location.toString()
For host URL:
window.location
// http://127.0.0.1:8000/projects/page/2?name=jake&age=34
let url = new URL(window.location.href);
/*
hash: ""
host: "127.0.0.1:8000"
hostname: "127.0.0.1"
href: "http://127.0.0.1:8000/projects/page/2?username=jake&age=34"
origin: "http://127.0.0.1:8000"
password: ""
pathname: "/projects/page/2"
port: "8000"
protocol: "http:"
search: "?name=jake&age=34"
username: ""
*/
url.searchParams.get('name')
// jake
url.searchParams.get('age')
// 34
url.searchParams.get('gender')
// null
To get the path, you can use:
http://www.example.com:8082/index.php#tab2?foo=789
Property Result
------------------------------------------
window.location.host www.example.com:8082
window.location.hostname www.example.com
window.location.port 8082
window.location.protocol http:
window.location.pathname index.php
window.location.href http://www.example.com:8082/index.php#tab2
window.location.hash #tab2
window.location.search ?foo=789
window.location.origin https://example.com
var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
currentPageUrlIs = this.href.toString().toLowerCase();
}else{
currentPageUrlIs = document.location.toString().toLowerCase();
}
The above code can also help someone
Adding result for quick reference
window.location;
Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript",
ancestorOrigins: DOMStringList,
origin: "https://stackoverflow.com",
replace: ƒ, assign: ƒ, …}
document.location
Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript",
ancestorOrigins: DOMStringList,
origin: "https://stackoverflow.com",
replace: ƒ, assign: ƒ
, …}
window.location.pathname
"/questions/1034621/get-the-current-url-with-javascript"
window.location.href
"https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript"
location.hostname
"stackoverflow.com"
For those who want an actual URL object, potentially for a utility which takes URLs as an argument:
const url = new URL(window.location.href)
https://developer.mozilla.org/en-US/docs/Web/API/URL
Nikhil Agrawal's answer is great, just adding a little example here you can do in the console to see the different components in action:
If you want the base URL without path or query parameter (for example to do AJAX requests against to work on both development/staging AND production servers), window.location.origin is best as it keeps the protocol as well as optional port (in Django development, you sometimes have a non-standard port which breaks it if you just use hostname etc.)
You have multiple ways to do this.
1:
location.href;
2:
document.URL;
3:
document.documentURI;
Use this:
var url = window.location.href;
console.log(url);
In jstl we can access the current URL path using pageContext.request.contextPath. If you want to do an Ajax call, use the following URL.
url = "${pageContext.request.contextPath}" + "/controller/path"
Example: For the page http://stackoverflow.com/posts/36577223 this will give http://stackoverflow.com/controller/path.
The way to get the current location object is window.location.
Compare this to document.location, which originally only returned the current URL as a string. Probably to avoid confusion, document.location was replaced with document.URL.
And, all modern browsers map document.location to window.location.
In reality, for cross-browser safety, you should use window.location rather than document.location.
location.origin+location.pathname+location.search+location.hash;
and
location.href
does the same.
You can get the full link of the current page through location.href
and to get the link of the current controller, use:
location.href.substring(0, location.href.lastIndexOf('/'));
Short
location+''
let url = location+'';
console.log(url);
Getting the current URL with JavaScript :
window.location.toString();
window.location.href
if you are referring to a specific link that has an id this code can help you.
$(".disapprove").click(function(){
var id = $(this).attr("id");
$.ajax({
url: "<?php echo base_url('index.php/sample/page/"+id+"')?>",
type: "post",
success:function()
{
alert("The Request has been Disapproved");
window.location.replace("http://localhost/sample/page/"+id+"");
}
});
});
I am using ajax here to submit an id and redirect the page using window.location.replace. just add an attribute id="" as stated.
let url = new URL(window.location.href);
console.log(url.href);
Use the above code to get the current URL of the website.
or try this - https://bbbootstrap.com/code/get-current-url-javascript-54628697
Firstly check for page is loaded completely in
browser,window.location.toString();
window.location.href
then call a function which takes url, URL variable and prints on console,
$(window).load(function(){
var url = window.location.href.toString();
var URL = document.URL;
var wayThreeUsingJQuery = $(location).attr('href');
console.log(url);
console.log(URL);
console.log(wayThreeUsingJQuery );
});

Why is window.location.href appending url again

In my code, I'm assigning the following:
window.location.href = "www.example.com/test";
But when the page actually loads, the browser URL is www.example.com/test/www.example.com/test. I'm not appending anything to the URL, and I'm not sure how its appending the URL again.
I think you're missing the "http" or "https" part. Have you tried the following?
window.location.href = "https://www.example.com/test";
or
window.location.href = "http://www.example.com/test";
Because you forgot the protocol. If you omit the protocol, window.location.href thinks you are trying to access a folder with the name of www.example.com, relative to the page you are currently on.
window.location.href="http://www.example.com/test/" will ensure that you access the external website www.example.com.
Hope this helps! :)
Check the way you are constructing the url, sometimes we miss the host, or enter the incorrect path
A safe way to change the URl is by making changes in the exisiting URL
first get the existing URL by
let exisitingURl = window.location.href;
now manipulate this url, for eg
exisitingURL = exisitingURL.replace('/auth', '/gateway');
now go to the url by
window.location.href = existingURL;

Click ID and open URL?

I am trying to click on a #ID and open a URL - but [as a newbie] - I can't seem to get it. I am using
$('#Test').click(function() {
OpenUrl('some url');
return false;
});
Something like:
$("#Test").click(function(event){
window.location.href = "some url";
event.preventDefault();
});
Just use window.location = 'some url'
$('#Test').click(function() {
window.location = 'http://www.google.com'
return false;
});
To elaborate a bit, window.location is an object with different quite interesting properties, you can read more about it here. In short, it contains the following properties (quoted from the link):
Property Description Example
hash the part of the URL that follows the #test
# symbol, including the # symbol.
host the host name and port number. [www.google.com]:80
hostname the host name (without the port number www.google.com
or square brackets).
href the entire URL. http://[www.google.com]:80
/search?q=devmo#test
pathname the path (relative to the host). /search
port the port number of the URL. 80
protocol the protocol of the URL. http:
search the part of the URL that follows the ?q=devmo
? symbol, including the ? symbol.
Since window.location is an object, it can also contain methods, which window.location does. By using these methods, instead of just assigning a string to the object, you can exert greater control of how the page is loaded, i.e. force a reload from the server or allow the browser to use a cached entry, skip creating a new history point etc.
Here is an overview of available methods:
Method Description
assign(url) Load the document at the provided URL.
reload(forceget) Reload the document from the current URL. forceget is a
boolean, which, when it is true, causes the page to always
be reloaded from the server. If it is false or not specified,
the browser may reload the page from its cache.
replace(url) Replace the current document with the one at the provided
URL. The difference from the assign() method is that after
using replace() the current page will not be saved in
session history, meaning the user won't be able to use
the Back button to navigate to it.
toString() Returns the string representation of the Location object's
URL.
You can also open resources in new windows if you want to. Please be aware that some users dislike having links opened in new windows for them, and prefer to having to consciously make this decision themselves. What you can do, however, is to mimic some of this functionality in your click-handler and try to figure out which mouse-button was clicked. If it was the middle-mouse button, then most browsers would open the link in a new window. This won't be exactly the same, since users won't be able to right-click and select 'Open in new window', but it might be good enough. Anyway, here's how to open a resource in a new window:
var WindowObjectReference;
function openRequestedPopup()
{
WindowObjectReference = window.open(
"http://www.domainname.ext/path/ImageFile.png",
"DescriptiveWindowName",
"resizable=yes,scrollbars=yes,status=yes");
}
You can read a lot more information here
hm if your OpenUrl function looks anything like this this should work just fine :D
function OpenUrl(url){
window.location = url;
}
btw: why returning false on click??

Categories