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

StackOverflow https://stackoverflow.com/questions/9924995

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

Was it helpful?

Solution

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>

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top