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

Question

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!!

Chris Calo · Accepted Answer · 2012-03-29T18:07:44.463

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>

Glad it worked out for you. If you like any of the answers here, you should accept it. Otherwise, drop some comments to let us know how what's missing. — Chris Calo, Apr 02 '12 at 02:46

James Hill · Answer 2 · 2012-03-29T12:32:48.517

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.

This is a clean and working solution (as demonstrated by the fiddle). Why the hit and run -1? — James Hill, Mar 29 '12 at 12:40

score -1 · Answer 3 · answered Mar 29 '12 at 12:19

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

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

3 Answers3