change url path language using jquery

Question

I have a website with three different languages place in separate folders as below.How am I able to change the en to cn if I click on the change cn language button?

www.example.com/en/content

www.example.com/cn/content

www.example.com/bn/content

<div class="language">
   <a href="#/" id="EN" data-language="en">EN</a>
   <a href="#/" id="CN" data-language="cn">CN</a>
   <a href="#/" id="BN" data-language="bn">BN</a>
</div>

jquery

$(function changelang() {
    $(".language a").click(function(e) {
        var selectedLanguage = $(this).attr("data-language");

        var currentContent = location.pathname.substring(
            location.pathname.indexOf("/", 1) + 1,
            location.pathname.length
        );

        // console.log(selectedLanguage, " >> ", currentContent);
        window.location.href = "/" + selectedLanguage + "/" + currentContent;
    });
});

so what was the issue...?

Bhargav Chudasama
– Bhargav Chudasama

2018-04-03 13:38:09 +00:00
Commented Apr 3, 2018 at 13:38 — Bhargav Chudasama
– Bhargav Chudasama, Commented Apr 3, 2018 at 13:38

Gabriele Petrioli · Accepted Answer · 2018-04-03 13:50:26Z

1

The basic problem is that you need to cancel the default link action

so add e.preventDefault() in your click handler.

$(function changelang() {
    $(".language a").click(function(e) {
        e.preventDefault();

        var selectedLanguage = $(this).attr("data-language");

        var currentContent = location.pathname.substring(
            location.pathname.indexOf("/", 1) + 1,
            location.pathname.length
        );

        // console.log(selectedLanguage, " >> ", currentContent);
        window.location.href = "/" + selectedLanguage + "/" + currentContent;
    });
});

And here are two alternate ways to do the same thing (because i had misunderstood the question initially)

Regular expression

$(function changelang() {
    $(".language a").click(function(e) {
        e.preventDefault();
        var selectedLanguage = $(this).attr("data-language");

        window.location.href = window.location.pathname.replace(
          /\/.+\/(.+)$,
          `/${selectedLanguage}/$1`
        );

    });
});

Split, modify, rebuild

$(function changelang() {
    $(".language a").click(function(e) {
        e.preventDefault();
        var selectedLanguage = $(this).attr("data-language");

        var currentContent = location.pathname.split('/')
        currentContent[1] = selectedLanguage;

        // console.log(selectedLanguage, " >> ", currentContent);
        window.location.href = currentContent.join('/');
    });
});

answered Apr 3, 2018 at 13:50

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9030616 Over a year ago

Thank you very much the code is working. But may I know what does it mean currentContent[1] ?

Gabriele Petrioli Over a year ago

@user9030616 the split method of a string returns an array of the parts separated by the parameter you pass, in this case the /. The [1] targets the element with index 1 in that array, in this case the language, and replaces it with the new lang. Then we join the array to a string to get the new url.

Collectives™ on Stack Overflow

change url path language using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related