Javascript location.pathname returns querysting [duplicate] - javascript

I have a URL like http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235.
I want to get the URL without the query string: http://localhost/dms/mduserSecurity/UIL/index.php.
Is there any method for this in JavaScript? Currently I am using document.location.href, but it returns the complete URL.

Try this:
let path = window.location.href.split('?')[0]
console.log({path})

Read about Window.location and the Location interface:
const urlPieces = [location.protocol, '//', location.host, location.pathname]
let url = urlPieces.join('')
console.log({urlPieces, url})

location.toString().replace(location.search, "")

var url = window.location.origin + window.location.pathname;

If you also want to remove hash, try this one: window.location.href.split(/[?#]/)[0]

Here's an approach using the URL() interface:
new URL(location.pathname, location.href).href

Try:
document.location.protocol + '//' +
document.location.host +
document.location.pathname;
(NB: .host rather than .hostname so that the port gets included too, if necessary)

To get every part of the URL except for the query:
var url = (location.origin).concat(location.pathname).concat(location.hash);
Note that this includes the hash as well, if there is one (I'm aware there's no hash in your example URL, but I included that aspect for completeness). To eliminate the hash, simply exclude .concat(location.hash).
It's better practice to use concat to join Javascript strings together (rather than +): in some situations it avoids problems such as type confusion.

just cut the string using split (the easy way):
var myString = "http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235"
var mySplitResult = myString.split("?");
alert(mySplitResult[0]);

Use properties of window.location
var loc = window.location;
var withoutQuery = loc.hostname + loc.pathname;
var includingProtocol = loc.protocol + "//" + loc.hostname + loc.pathname;
You can see more properties at https://developer.mozilla.org/en/DOM/window.location

How about this: location.href.slice(0, - ((location.search + location.hash).length))

Here are two methods:
<script type="text/javascript">
var s="http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu
=true&pcode=1235";
var st=s.substring(0, s.indexOf("?"));
alert(st);
alert(s.replace(/\?.*/,''));
</script>

You could make use of the URL constructor like this:
const href = 'http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235'; // document.location.href
const url = new URL(href);
const noSearchUrl = href.replace(url.search, '');
console.log(noSearchUrl);

Just add these two lines to $(document).ready in JS as follow:
$(document).ready(function () {
$("div.sidebar nav a").removeClass("active");
$('nav a[href$="'+ window.location.pathname.split("?")[0] +'"]').addClass('active');
});
it is better to use the dollar sign ($) (End with)
$('nav a[href$
instead of (^) (Start with)
$('nav a[href^
because, if you use the (^) sign and you have nested URLs in the navigation menu, (e.g "/account" and "/account/roles")
It will active both of them.

window.location.href.split("#")[0].split("?")[0]

You can create instance of URL and then clear the query string:
const url = new URL(document.location.href);
url.search = '';
console.log(url.href);

If you are using navigation bar and want to get the pure url after clicking on the side bar navigation, then the following code might be helpful:
$(document).ready(function () {
$("div.sidebar nav a").removeClass("active");
var urlPath = window.location.pathname.split("?")[0];
var nav = $('div.sidebar nav a').filter(function () {
return $(this).attr('href').toLowerCase().indexOf(urlPath.toLocaleLowerCase()) > -1;
});
$(nav).each(function () {
if ($(this).attr("href").toLowerCase() == urlPath.toLocaleLowerCase())
$(this).addClass('active');
});
});

Related

Replace the url parameter value using js

I have a URL like below.
something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false
I want to replace the value of parameter showHiddenElements to some new value.
for e.g. exising value in URL -> showHiddenElements=false
I want to change it through JavaScript to -> showHiddenElements=true
Please advise.
Edit:
showHiddenElements may not always be false. And In some cases it may not be available.
Use the URL Object:
const url = new URL('http://something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false');
url.searchParams.delete('showHiddenElements');
url.searchParams.append('showHiddenElements', true);
So you just delete the parameter and update it with the new one (not the most elegant)
Docs here: https://developer.mozilla.org/fr/docs/Web/API/URL
You could use String.replace for that:
var url = 'something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false';
newUrl = url.replace('showHiddenElements=false', 'showHiddenElements=true');
You could also do it fancy and use regex:
var url = 'something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false';
newUrl = url.replace(/showHiddenElements=false$/, 'showHiddenElements=true');
The regex would only match showHiddenElements=false if it's on the end of the URL
To see if it's available you could use regex too:
var url = 'something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false';
// If the url doesn't have a showHiddenElements=__any_word__
if (!url.match(/showHiddenElements=\w+/)) {
url = url + 'showHiddenElements=false';
}
var url = "something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false";
alert("Before: "+url);
url = url.replace("&showHiddenElements=false","&showHiddenElements=true");
alert("After: "+url);
//Console.log clips the end so we can't see the result :(
Maybe something liket this:
var loc = window.location.href;
var newLoc = loc.Replace('showHiddenElements=true', 'showHiddenElements=false')
A JavaScript Regular Expression should help if you are just treating the URL as a string.
var str = 'something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false';
var res = str.replace(/showHiddenElements/i, 'true');
console.log(res);

Remove hash from current page’s URL

I want to remove the hash, as well as anything after it, from a URL. For example, I might have:
http://example.com/#question_1
… which slides to question no. 1 to show an error message. When the user’s input then passes validation, I need to remove #question_1 from the current location.
I’ve tried all of these, but none of them has worked for me:
document.location.href.replace(location.hash, "");
window.location.hash.split('#')[0];
window.location.hash.substr(0, window.location.hash.indexOf('#'));
Note: I don’t just want to get the URL – I want to remove it from my address bar.
history.pushState("", document.title, window.location.href.replace(/\#(.+)/, '').replace(/http(s?)\:\/\/([^\/]+)/, '') )
Try this :use .split() to split string by # and then read first element in array using index 0
var url = 'http://example.com#question_1';
var urlWithoutHash = url.split('#')[0];
alert(urlWithoutHash );
Use split in javascript
var str = "http://example.com#question_1";
alert(str.split("#")[0]);
Try this way:
var currentPath = window.location.pathname;
var myUrl = currentPath.split("#")[0];
OR
var currentPath = window.location.href;
var myUrl = currentPath.split("#")[0];
Hope it helps.
This will clear the id selector from the uri
location.hash = '';
Use .split as shown :
var str = "http://example.com#question_1";
alert((str.split("#")[0]);
or use .substring() as shown :
var str = "http://example.com#question_1";
alert((str.substring(0,str.indexOf('#'))));

How to get url path without $_GET parameters using javascript?

If my current page is in this format...
http://www.mydomain.com/folder/mypage.php?param=value
Is there an easy way to get this
http://www.mydomain.com/folder/mypage.php
using javascript?
Don't do this regex and splitting stuff. Use the browser's built-in URL parser.
window.location.origin + window.location.pathname
And if you need to parse a URL that isn't the current page:
var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";
console.log(url.origin + url.pathname);
And to support IE (because IE doesn't have location.origin):
location.protocol + '//' + location.host + location.pathname;
(Inspiration from https://stackoverflow.com/a/6168370/711902)
Try to use split like
var url = "http://www.mydomain.com/folder/mypage.php?param=value";
var url_array = url.split("?");
alert(url_array[0]); //Alerts http://www.mydomain.com/folder/mypage.php
Even we have many parameters in the GET , the first segment will be the URL without GET parameters.
This is DEMO
try this:
var url=document.location.href;
var mainurl=url.split("?");
alert(mainurl[0]);
Try
var result = yourUrl.substring(0, yourUrl.indexOf('?'));
Working demo
var options = decodeURIComponent(window.location.search.slice(1))
.split('&')
.reduce(function _reduce (/*Object*/ a, /*String*/ b) {
b = b.split('=');
a[b[0]] = b[1];
return a;
}, {});

FileName from url excluding querystring

I have a url :
http://www.xyz.com/a/test.jsp?a=b&c=d
How do I get test.jsp of it ?
This should do it:
var path = document.location.pathname,
file = path.substr(path.lastIndexOf('/'));
Reference: document.location, substr, lastIndexOf
I wont just show you the answer, but I'll give you direction to it. First... strip out everything after the "?" by using a string utility and location.href.status (that will give you the querystring). Then what you will be left with will be the URL; get everything after the last "/" (hint: lastindexof).
Use a regular expression.
var urlVal = 'http://www.xyz.com/a/test.jsp?a=b&c=d';
var result = /a\/(.*)\?/.exec(urlVal)[1]
the regex returns an array, use [1] to get the test.jsp
This method does not depend on pathname:
<script>
var url = 'http://www.xyz.com/a/test.jsp?a=b&c=d';
var file_with_parameters = url.substr(url.lastIndexOf('/') + 1);
var file = file_with_parameters.substr(0, file_with_parameters.lastIndexOf('?'));
// file now contains "test.jsp"
</script>
var your_link = "http://www.xyz.com/a/test.jsp?a=b&c=d";
// strip the query from the link
your_link = your_link.split("?");
your_link = your_link[0];
// get the the test.jsp or whatever is there
var the_part_you_want = your_link.substring(your_link.lastIndexOf("/")+1);
Try this:
/\/([^/]+)$/.exec(window.location.pathname)[1]

Is there any method to get the URL without query string?

I have a URL like http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235.
I want to get the URL without the query string: http://localhost/dms/mduserSecurity/UIL/index.php.
Is there any method for this in JavaScript? Currently I am using document.location.href, but it returns the complete URL.
Try this:
let path = window.location.href.split('?')[0]
console.log({path})
Read about Window.location and the Location interface:
const urlPieces = [location.protocol, '//', location.host, location.pathname]
let url = urlPieces.join('')
console.log({urlPieces, url})
location.toString().replace(location.search, "")
var url = window.location.origin + window.location.pathname;
If you also want to remove hash, try this one: window.location.href.split(/[?#]/)[0]
Here's an approach using the URL() interface:
new URL(location.pathname, location.href).href
Try:
document.location.protocol + '//' +
document.location.host +
document.location.pathname;
(NB: .host rather than .hostname so that the port gets included too, if necessary)
To get every part of the URL except for the query:
var url = (location.origin).concat(location.pathname).concat(location.hash);
Note that this includes the hash as well, if there is one (I'm aware there's no hash in your example URL, but I included that aspect for completeness). To eliminate the hash, simply exclude .concat(location.hash).
It's better practice to use concat to join Javascript strings together (rather than +): in some situations it avoids problems such as type confusion.
just cut the string using split (the easy way):
var myString = "http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235"
var mySplitResult = myString.split("?");
alert(mySplitResult[0]);
Use properties of window.location
var loc = window.location;
var withoutQuery = loc.hostname + loc.pathname;
var includingProtocol = loc.protocol + "//" + loc.hostname + loc.pathname;
You can see more properties at https://developer.mozilla.org/en/DOM/window.location
How about this: location.href.slice(0, - ((location.search + location.hash).length))
Here are two methods:
<script type="text/javascript">
var s="http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu
=true&pcode=1235";
var st=s.substring(0, s.indexOf("?"));
alert(st);
alert(s.replace(/\?.*/,''));
</script>
You could make use of the URL constructor like this:
const href = 'http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235'; // document.location.href
const url = new URL(href);
const noSearchUrl = href.replace(url.search, '');
console.log(noSearchUrl);
Just add these two lines to $(document).ready in JS as follow:
$(document).ready(function () {
$("div.sidebar nav a").removeClass("active");
$('nav a[href$="'+ window.location.pathname.split("?")[0] +'"]').addClass('active');
});
it is better to use the dollar sign ($) (End with)
$('nav a[href$
instead of (^) (Start with)
$('nav a[href^
because, if you use the (^) sign and you have nested URLs in the navigation menu, (e.g "/account" and "/account/roles")
It will active both of them.
window.location.href.split("#")[0].split("?")[0]
You can create instance of URL and then clear the query string:
const url = new URL(document.location.href);
url.search = '';
console.log(url.href);
If you are using navigation bar and want to get the pure url after clicking on the side bar navigation, then the following code might be helpful:
$(document).ready(function () {
$("div.sidebar nav a").removeClass("active");
var urlPath = window.location.pathname.split("?")[0];
var nav = $('div.sidebar nav a').filter(function () {
return $(this).attr('href').toLowerCase().indexOf(urlPath.toLocaleLowerCase()) > -1;
});
$(nav).each(function () {
if ($(this).attr("href").toLowerCase() == urlPath.toLocaleLowerCase())
$(this).addClass('active');
});
});

Categories

Resources