Change language code in URL using Javascript

Question

I am developing a website that works in two languages. I need to change URL to include the selected language.

What I exactly need is:

Pick the current URL
Check if the URL contains any language code
Append the code if not exist or change the code to the selected one if exists

For example, there is an URL for English (default):

http://localhost:11767/Home/resultMain?model=1&&type=1

When a user selects Spanish (es) it should be:

http://localhost:11767/es/Home/resultMain?model=1&&type=1

In which language is your backend written? Are you using node js? — Daniel
– Daniel, Commented Feb 11, 2017 at 13:08

Bulent Vural · Accepted Answer · 2017-02-11 14:40:00Z

4

You can parse the URL with the help of an a element then replace the part you want and re-build the URL :

function addReplaceLangCode(url, langCode) {
  var a = document.createElement('a');
  a.href = document.getElementById('url').value; // or document.location.href;

  var paths = a.pathname.split('/');
  paths.shift();

  if(paths[0].length == 2) {
    paths[0] = langCode;
  }else{
    paths.unshift(langCode);
  }
  return a.protocol + '//' +
    a.host + '/' + paths.join('/') + 
    (a.search != '' ?  a.search : '') + 
    (a.hash != '' ?  a.hash : '');
}
    
function onClickReplace() {
    document.getElementById('result').innerHTML = addReplaceLangCode( document.location.href, 'es');
}

URL : <input type="text" id="url" style="width:400px" value="http://localhost:11767/Home/resultMain?model=1&&type=1"><input type="button" value="Replace" onclick="onClickReplace()"><br />
Result: <span id="result"></span>

edited Feb 11, 2017 at 14:40

answered Feb 11, 2017 at 13:47

Bulent Vural

2,7081 gold badge16 silver badges18 bronze badges

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

5 Comments

Moustafa Over a year ago

this method will eliminate the part of query string parameters if the url is localhost:11767/es/Home/resultMain?model=1&&type=1 and user click on english the link will be localhost:11767/en/Home/resultMain

Moustafa Over a year ago

Thanks very much it is now working fine and you really save my day :)

Moustafa Over a year ago

Littile bug in this code when the url is localhost:11767/en/Home/resultMain?model=2&type=2 and i click on en agin it will result localhost:11767/en/Home/resultMain/?model=2&type=2 click again on en localhost:11767/en/Home/resultMain//?model=2&type=2 Note the slash that is appended before question mark

Bulent Vural Over a year ago

Indeed. Please check now. We don't have to add extra '/' before the query string and the hash.

Christian Over a year ago

Thanks for the example. Still helpful today. I have replaced '/' with (langCode == '' ? '' : '/') to make it work the other way round.

Daniel · Accepted Answer · 2017-02-11 13:20:34Z

0

I don't know if it is exactly this, what you want. But JavaScript can obtain URL using object "location". Especially location.pathname is useful for you. You can apply reg-exp on location.pathname to check if URL contain /es/ and if yes, then translate website by proper Ajax requests to your backend.

But generally I recommending to use routing of your backend. The best solution in my opinion - use http headers to inform server about preferred language.

https://www.w3.org/International/questions/qa-accept-lang-locales

answered Feb 11, 2017 at 13:20

Daniel

8,7757 gold badges63 silver badges88 bronze badges

Comments

MIWMIB · Accepted Answer · 2018-02-04 08:05:00Z

Based on @Bulnet Vural's answer above, I wrote the following code because I needed to toggle the language path in and out of the url.

var getOtherLanguageLocation = function (currentUrl, languagePath) {
    // based on https://stackoverflow.com/a/42176588/1378980
    var anchorTag = document.createElement('a');
    anchorTag.href = currentUrl;
    var paths = anchorTag.pathname.split("/");

    // remove all the empty items so we don't get double slash when joining later.
    var paths = paths.filter(function (e) { return e !== '' })

    // the language will be at index 1 of the paths
    if (paths.length > 0 && paths[0].toLowerCase() == languagePath) {
        // remove the language prefix
        paths.splice(0, 1);
    } else {
        // add the language prefix
        paths.unshift(languagePath);
    }

    return anchorTag.protocol + '//' +
      anchorTag.host + '/' + paths.join('/') +
      anchorTag.search + anchorTag.hash;
};

Collectives™ on Stack Overflow

Change language code in URL using Javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related