CODEWITHSUNDEEP
javascripturlpath
anon
anon

Reputation:

How can I extract and then change the url path using javascript?

I am trying to extract part of the url and replace it with custom text using javascript.

For example, I want to fetch the current url such as:
mydomain.com/url_part_to_change/some-other-stuff

and then change that url to insert so that new new url is:
mydomain.com/new_url_part/some-other-stuff

Here is what I have:

function changeURL() {
        var theURL = window.location.pathname;
        theURL.replace("/url_part_to_change/", "/new_url_part/");
        //Set URL
}

However, when I try to call the function changeURL(), it returns undefined instead of the new url.

For example if I do this:

alert(changeURL());

then what alerts is undefined

Upvotes: 10

Views: 34143

Answers (8)

Ronnie Smith
Ronnie Smith

Reputation: 18565

The URL Constructor is probably the best tool for the job.

let urlString = "http://example.com:8080/url_part_to_change/some-other-stuff";
let url = new URL(urlString);
let path = url.pathname;
let base = url.href.replace(path,"");

let pathArray = path.split("/");
pathArray.forEach(function(p, i){
 console.log(i, p)
});
pathArray[1] = "new";

console.log(base + pathArray.join("/"));

Upvotes: 0

mike
mike

Reputation: 411

This is quite an old post but just to add:

modifying window.location causes page navigations so if thats not desired create a new URL object and then you can modify the parts as needed.

in my case i needed to change the path to a value from a value in the querystring.

eg.

/*
 * http://something.com/some/path?redirect=/some/other/path
 * ->
 * http://something.com/some/other/path
 */

let u = new URL(window.location.href)
u.pathname=u.searchParams.get("redirect")
u.searchParams.delete("redirect")
console.log(u.href)

Upvotes: 0

Vishal Singh
Vishal Singh

Reputation: 77

   function changeURL() {
      //set new path
      window.location.pathname = "/new_url_part/";

      //get new url
      const newURL = window.location.href;
      return newURL;
    }

Upvotes: 0

daxeh
daxeh

Reputation: 1085

TL;DR

// update the pathname that will reload the page
window.location.pathname = myNewPathname;

Further Explanation:

Window.location ( image attached below ) provides you an object containing all the uri parts information. So, you can get this object via window.location and access the property pathname then do your stuffs. For example:

var locationObject = window.location;
var pathnameToChange = locationObject.pathname;

// do stuffs to "copy" of pathname, this will not reload the page
var myNewPathname = doSomethingMyPathname( pathnameToChange );

Additional Examples:

Alternatively, set new url using location.href. Check the MDN documentation for examples on location.assign(), location.replace(), location.reload() and notes on the different available functions

// ie.myNewUrl is something I created -> www.blah.com/updated/path
window.location.href = myNewUrl; 

// or
window.location.assign(myNewUrl)

A window.location Object in Console

window.location

There are three references to further understand URI components

  1. URI_scheme
  2. Standards written by Tim Berners-Lee
  3. MDN Location

Hope this helps.

Upvotes: 7

abhi
abhi

Reputation: 1084

you are not returning any thing in function, Please make function like 

function changeURL() {
        var theURL = window.location.pathname;
       return  theURL.replace("/url_part_to_change/", "/new_url_part/");
        //Set URL

}

Upvotes: 1

JanS
JanS

Reputation: 2075

As the others said, you don't return anything. What they are forgetting is that String.replace() just makes a copy of theURL and doesn't change theURL.

Try this:

function changeURL() {
  var theURL = window.location.pathname;
  theURL = theURL.replace("/url_part_to_change/", "new_url_part/");
  //Set URL

  return theURL;
}
alert(changeURL());

Upvotes: 1

Criss Lion
Criss Lion

Reputation: 209

This should work for you correctly:

function changeURL() {
        // Get the url, just as you did
        var theURL = window.location.pathname;
        // Return the url
        return theURL.replace("/url_part_to_change/", "/new_url_part/"); 
}

Upvotes: 2

Zee
Zee

Reputation: 8488

You forgot to return

function changeURL() {
    var theURL = window.location.pathname;
    var newURL = theURL.replace("/url_part_to_change/", "/new_url_part/");
    //Set URL
    return newURL;
}

alert(changeURL())//Now you won't see undefined.

Upvotes: 0

Related Questions