Develop Reference

Remove part of the link in javascript

I want to create a button were people can click on to get redirected to a new url based on the current url.
/collection/?filter_kleur=grijs&query_type_kleur=or
I want everything after collection/ to be removed. What is the easiest way to fix this?

You could use the URL api.
const url = new URL('https://test.be/collection/?filter_kleur=grijs&query_type_kleur=or');
const output = document.getElementById('output');
output.innerHTML = url.host + url.pathname;
<output id="output"></output>

How to fetch appended part of url using javascript

How can we get part of string added to the url using java script.
example: my url link is in below format:
https://domain/imp/s/testrecordname/idoftestrecord/selectedrecord?languagelocale
i tried below ways.
var v1=window.location.href
var v2=window.location.host
var v3=window.location.hostname
var v4=window.location.protocol
var v5=window.location.pathname
var v6=window.location.search
var v7=window.location.hash
but i am unable to get "testrecordname/idoftestrecord/selectedrecord" this portion of url.
can anyone suggest how to attain it

You need to manipulate the pathname
const url = new URL("https://domain/imp/s/testrecordname/idoftestrecord/selectedrecord?languagelocale")
console.log(url.href);
console.log(url.host);
console.log(url.hostname);
console.log(url.protocol);
console.log(url.pathname); // this???
console.log(url.pathname.split("/s/")[1]); // for example
console.log(url.search);
console.log(url.hash);

One way could be extracting from URL string using string functions
let s = 'https://domain/imp/s/testrecordname/idoftestrecord/selectedrecord?languagelocale';
console.log(s.slice(s.indexOf('s/')+2,s.indexOf('?')));

Hide parts of window.location.href

I have an example url - http://localhost:4000/something&test#test.com&true
I need to hide everything after http://localhost:4000/something
I have the following code:
var locationHref = window.location.href;
var splitLocationHref = locationHref.split('&')[0];
Is it possible to just hide &test#test.com&true from the URL, without breaking the functionality that that part of the URL provides?

No, the browser won't let you do this for security reasons. You'll need to change the page so that these values aren't passed in through the querystring

Stripping URL Argument

An example URL that opens my page:
https://mydomain.com/stuff/mypage.php?id=aslkj34rf340if0i3m4flakmf
Is there anyway with javascript to strip everything after .php so that when the user bookmarks the page the bookmark just has https://mydomain.com/stuff/mypage.php as the link?

you need to take a look at this one click me
just use the window.location.search

You can do that by:
var url = document.URL;
var urlparts= url.split('?');
//here is the link you want
var bookmark = urlparts[0];

Get current URL and modify subdirectory and then go to URL with Javascript

I'm creating a bilingual website for a client. Two versions of the site in different languages will be created and stored in two folders:
/en/
/chi/
What I want to do is create a link to toggle between the two languages. On the conceptual level, I understand that Javascript can detect the current URL and split it into its different components, modify parts of it (in this case change between /en/ and /chi/), and then go to that new URL when the link is clicked.
But I have zero knowledge in javascript so I have no idea how to execute... I have come across this page:
http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
but it doesn't explain how to modify and go to the new link.
You help will be greatly appreciated!!

To not break usability considerations like Shift + Click to open in a new window, you should create a plain old link (<a>) that points to the other language URL. There's nothing wrong with building the link via JavaScript, but you could also do it on the server using PHP or whatever templating language you're using.
Here's a script that does this with JavaScript if that's what you decide you'd like to do.
<!DOCTYPE html>
<body>
Content before the link.
<script>
(function () {
// this assumes you're on the en version and want to switch to chi
var holder = document.createElement("div");
var url = window.location.href.replace("/en/", "/chi/");
var link = document.createElement("a");
link.innerText = "Chewa"; // or whatever the link should be
link.href = url;
holder.appendChild(link);
document.write(holder.innerHTML);
})();
</script>
Content after the link.
</body>

If you simply want to take the full URL and replace /en/ with /chi/ or vise-versa, use the code below.
HTML
<span onclick="SwitchLang()">View [Some other Language]</span>
JavaScript
function SwitchLang() {
//Does URL contain "/en/"?
if(window.location.href.indexOf("/en/") != -1) {
//URL contain "/en/", replace with "/chi/"
window.location.href = window.location.href.replace("/en/", "/chi/");
}
//Does URL contain "/chi/"?
else if(window.location.href.indexOf("/chi/") != -1) {
//URL contain "/chi/", replace with "/en/"
window.location.href = window.location.href.replace("/chi/", "/en/");
}
}
Or, a bit more concise (un-commented version)
function SwitchLang() {
if(window.location.href.indexOf("/en/") != -1)
window.location.href = window.location.href.replace("/en/", "/chi/");
else if(window.location.href.indexOf("/chi/") != -1)
window.location.href = window.location.href.replace("/chi/", "/en/");
}
Note: In JS, when you modify window.location.href, the new URL is automatically loaded.
Here's a working fiddle for you to play with.

It looks like you need to change the window.location.pathname. For example:
// assuming the url `http://www.example.org/en/foo/bar/page.html`
var paths = window.location.pathname.split("/");
// change `en`
paths[1] = "chi";
// go to the new url
window.location.pathname = paths.join("/");
See:
https://developer.mozilla.org/en/DOM/window.location