Detect html lang with jQuery

Question

I'm using a multilingual plugin in Wordpress that enables users to change their language options on a website.

This plugin among other things changes the HTML language attribute e.g.

<html lang="en-GB">

or

<html lang="en-US">

I've tried to detect the language using the following selector:

if ($( 'html:lang(en-us)')) {
    alert('US lang detected');
}

However this creates a false positive as other elements further down the page are set to 'en-us' even if the opening HTML attribute is set to 'en-GB'.

What selector would specifically examine only the opening HTML attribute?

Use $('html[lang="en-us"]')

Adam Azad
– Adam Azad

2015-11-11 17:23:28 +00:00
Commented Nov 11, 2015 at 17:23 — Adam Azad
– Adam Azad, Commented Nov 11, 2015 at 17:23

Stryner · Accepted Answer · 2015-11-11 17:25:46Z

8

Your selector is correct, but you're using it in the if statement incorrectly.

$( 'html:lang(en-us)') will return a jQuery object. jQuery objects are always truthy, so your if statement will always evaluate to true.

A simple fix is to use the .is function, which will return a boolean:

if ($('html').is(':lang(en-us)')) {
    alert('US lang detected');
}

answered Nov 11, 2015 at 17:25

Stryner

7,3363 gold badges21 silver badges20 bronze badges

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

1 Comment

Dan382 Over a year ago

Thanks for explaining things, it's much appreciated. Went with a plain Javascript solution as advised by another comment, however this would have also done the job.

Sampson · Accepted Answer · 2015-11-11 17:28:21Z

5

By using jQuery for a task like this, you may be making things unnecessarily complicated and slow:

if ( document.documentElement.lang.toLowerCase() === "en-us" ) {
    alert( "American English." );
}

Vanilla JavaScript is better for menial tasks like reading an attribute value, etc.

answered Nov 11, 2015 at 17:28

Sampson

269k76 gold badges546 silver badges570 bronze badges

1 Comment

Dan382 Over a year ago

Thanks, I appreciate the feedback. The Javascripts handling the job perfectly.

Sampson · Accepted Answer · 2015-11-11 17:33:30Z

2

You have to check for length:

if ( $("html:lang(en-us)").length > 0 ) {
    alert( 'US lang detected' );
}

edited Nov 11, 2015 at 17:33

Sampson

269k76 gold badges546 silver badges570 bronze badges

answered Nov 11, 2015 at 17:26

Karthik Ganesan

4,2622 gold badges28 silver badges43 bronze badges

1 Comment

Sampson Over a year ago

Since positive numbers are truthy in JavaScript, you could remove the >0 portion of the conditional statement, and the code would be equally valid. (just be careful with negative numbers)

mapodev · Accepted Answer · 2015-11-11 17:25:32Z

1

$('html[lang="en-us"]')

should do it.

answered Nov 11, 2015 at 17:25

mapodev

9888 silver badges14 bronze badges

Comments

edonbajrami · Accepted Answer · 2015-11-11 17:21:21Z

0

You can grab the lang as attr, like the code in snippet

console.log($("html").attr("lang"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head></head>
  <body></body>
</html>

answered Nov 11, 2015 at 17:21

edonbajrami

2,21625 silver badges35 bronze badges

Comments

Mr Coder · Accepted Answer · 2021-03-14 13:29:18Z

0

this is working for me in WordPress

jQuery(document).ready(function($){ console.log("cons"); if ( $("html:lang(en)").length > 0 ) {
   alert( 'US lang detected' );
} });

answered Mar 14, 2021 at 13:29

Mr Coder

5234 silver badges13 bronze badges

Collectives™ on Stack Overflow

Detect html lang with jQuery

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related