Get page language in javascript

  • Hello,

    How to get the language of a WordPress page in Javascript?

    I have found a way to check for Spanish:

    if(window.location.href.indexOf("/es/") > -1) {

    But if the website is not with Permalink Settings with “Post name”, the language preference will be with ?lang=es in the URL.

    And, can a WordPress lang preference be “en-uk” for example?

    I am looking for a Javascript way whatever the settings of WordPress.

    Thanks guys!

    • This topic was modified 4 years, 10 months ago by londonuk371.
Viewing 12 replies - 1 through 12 (of 12 total)

  • @londonuk371
    Use the html lang element like this :
    document.getElementsByTagName('html')[0].getAttribute('lang');
    https://jsfiddle.net/loktar/ZRvE6/

    Also, it must be baked into WordPress already for it to be printing out the language code.

    • This reply was modified 4 years, 10 months ago by bcworkz. Reason: code fixed
    Thread Starter londonuk371

    (@londonuk371)

    Yes but you can have your browser in English and looking at a page in French for example.

    @londonuk371

    Yes, there will always be exceptions imo.
    It’s not a great method, there will be pros and cons for different solutions.
    You can parse the url in javascript using methods like this :
    https://www.sitepoint.com/get-url-parameters-with-javascript/

    Also, here are the language codes :
    https://www.andiamo.co.uk/resources/iso-language-codes/

    Moderator bcworkz

    (@bcworkz)

    The code that corrinarusso suggested gets the lang attribute of the page’s <html> element, which is set by WP at the server. It’s unrelated to any browser language settings. It’s also possible for a lesser element (a <div> for example) to be in a different language than the overall html element. Such elements may or may not have their own lang attribute.

    Since WP should know what language is being output, it’s feasible to pass a localized language value from WP to your JS code with wp_localize_script(). This might be more reliable than relying upon lang attributes.

    Thread Starter londonuk371

    (@londonuk371)

    I got some help and this code which I think is fine:

    // tested with the following urls:
// url = 'domain.com/sdfsdf/dafsfd?lang=es';
// url = 'domain.com/sdfsdf/dafsfd?lang=es&sdfsf=dfsdf';
// url = 'domain.com/en-uk';
// url = 'domain.com/en-uk/';
// url = 'domain.com/en-uk?dfsdfsdf=dfsdf&sdfsfsdf=dfsdfs';

var url = window.location.href;
var lang = getLanguage(url);
console.log(lang);

function getLanguage(url) {
    // if language is set via url parameter
    if (url.includes('?lang=')) {
        return url.split('?lang=')[1].split('&')[0];
    }
    // if language is set via url route
    else {
        return url.split('/')[1].split('?')[0];
    }
}

    @londonuk371

    Pretty messy. I assume this is a nice to have, and not something mission critical to your business ? FYI, the UK language code is en-gb

    Thread Starter londonuk371

    (@londonuk371)

    @corrinarusso Yes for business, I think it’s fine. Indeed, it’s not “en-uk” but “en-gb”. Anyway I will check only the 2 first letters is the return is not NULL.

    @londonuk371

    Do you mind if I ask you what the functional goal is ? Obviously you want to know the language, what are you trying to accomplish with it?

    Thread Starter londonuk371

    (@londonuk371)

    @corrinarusso To be able to launch an iframe with this value:
    https://alissart.com/en/boutique/
    For now, the iframe language depends on the language of the browser but should first depends on the WordPress page language.
    The development of this iframe is not yet finished and miss some options on the iframe top bar, on the side of the “Cart” button, like the Search or the Language.

    • This reply was modified 4 years, 10 months ago by londonuk371.

    @londonuk371

    Ah. The dreaded i word.

    Thread Starter londonuk371

    (@londonuk371)

    @corrinarusso haha! The iframe is working fine and full responsive, the iframe is auto-resized according to the height of its content.
    It has been standardized by the W3C for long long time. https://www.w3.org/WAI/PF/wiki/IFRAME
    Invented by Microsoft in in 1997! :/

    Thread Starter londonuk371

    (@londonuk371)

    @corrinarusso You’re right, it’s pretty messy! The best is to go through:
    document.documentElement.lang
    which return the value of the lang attribute of the <HTML> tag:
    <html class="no-js" lang="en-GB">
    This attribute does not depend on the browser language.

    • This reply was modified 4 years, 10 months ago by londonuk371.
    • This reply was modified 4 years, 10 months ago by londonuk371.
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Get page language in javascript’ is closed to new replies.

Tags