Jquery if html lang

Demo:

• Ajax
  • Global Ajax Event Handlers
  • Helper Functions
  • Low-Level Interface
  • Shorthand Methods
  • Deprecated 1.3
  • Deprecated 1.7
  • Deprecated 1.8
  • Deprecated 1.9
  • Deprecated 1.10
  • Deprecated 3.0
  • Deprecated 3.2
  • Deprecated 3.3
  • Deprecated 3.4
  • Deprecated 3.5
  • Basics
  • Custom
  • Fading
  • Sliding
  • Browser Events
  • Document Loading
  • Event Handler Attachment
  • Event Object
  • Form Events
  • Keyboard Events
  • Mouse Events
  • Class Attribute
  • Copying
  • DOM Insertion, Around
  • DOM Insertion, Inside
  • DOM Insertion, Outside
  • DOM Removal
  • DOM Replacement
  • General Attributes
  • Style Properties
  • Collection Manipulation
  • Data Storage
  • DOM Element Methods
  • Setup Methods
  • Properties of jQuery Object Instances
  • Properties of the Global jQuery Object
  • Attribute
  • Basic
  • Basic Filter
  • Child Filter
  • Content Filter
  • Form
  • Hierarchy
  • jQuery Extensions
  • Visibility Filter
  • Filtering
  • Miscellaneous Traversing
  • Tree Traversal
  • Version 1.0
  • Version 1.0.4
  • Version 1.1
  • Version 1.1.2
  • Version 1.1.3
  • Version 1.1.4
  • Version 1.2
  • Version 1.2.3
  • Version 1.2.6
  • Version 1.3
  • Version 1.4
  • Version 1.4.1
  • Version 1.4.2
  • Version 1.4.3
  • Version 1.4.4
  • Version 1.5
  • Version 1.5.1
  • Version 1.6
  • Version 1.7
  • Version 1.8
  • Version 1.9
  • Version 1.11 & 2.1
  • Version 1.12 & 2.2
  • Version 3.0
  • Version 3.1
  • Version 3.2
  • Version 3.3
  • Version 3.4
  • Version 3.5
  • Version 3.6
  • Version 3.7

  Books

  Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

  Источник

  gregoriopellegrino / get_langs_in_html_document.js

  Very simple script in jQuery to find all the languages present in an HTML document. Useful for controlling the accessibility of documents. Improvements are welcome. #a11y Made to run from the browser development console

  This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

  // main lang

  if ( $ ( "html" ) . get ( 0 ) . hasAttribute ( "lang" ) )

  var main_lang = $ ( "html" ) . attr ( "lang" ) ;

  > else

  var main_lang = $ ( "body" ) . attr ( "lang" ) ;

  >

  console . log ( "Main language is " + main_lang ) ;

  // children lang

  var langs = [ ] ;

  $ ( "*[lang]" ) . each ( function ( )

  var lang = $ ( this ) . attr ( "lang" ) ;

  if ( $ . inArray ( lang , langs ) == - 1 )

  langs . push ( lang )

  >

  > ) ;

  console . log ( "Other languages found: " + langs ) ;

  Off the top of my head, vanilla ES6 for HTML with a few improvements here and there – see comments.

  Sorry, couldn’t test that extensively but what’s for sure is that it won’t work for xhtml because xml namespace so element.lang doesn’t work, and neither does querySelectorAll with the xml:lang attribute – please someone feel free to XHTML-ize it and/or use cheat code at the end.

  // Checking if lang for html and body // Trimmed string must be more than 1 char, // else we explicitely set to undefined (otherwise empty string) const docLang = (document.documentElement.lang).trim().length > 1 ? document.documentElement.lang : undefined; const bodyLang = (document.body.lang).trim().length > 1 ? document.body.lang : undefined; if (docLang && bodyLang) < // If both are specified if (docLang !== bodyLang) < // We check if they match, and warn if they don’t console.warn( `HTML and BODY langs don’t match. HTML is '$' while BODY is '$'. Main lang will be '$'.` ); > else < // Else we use html’s console.log(`Main lang is '$'.`); > > else if (docLang || bodyLang) < // If there is at least one, we infer the main lang // You might want to differentiate them though i.e. if no lang on HTML, raise a warning console.log(`Main lang is '$'.`); > else < // Else we warn no lang is set and the navigator’s default will be used console.warn(`No lang is set, it will default to the navigator’s: $.`) > // Other languages start here, with an empty array let langs = []; // We check all elements in body with a lang attribute const els = document.body.querySelectorAll(`*[lang]`); // For each, we check if we must add the lang to the array for (let i = 0; i < els.length; i++) < const el = els[i]; const langToAdd = el.lang.trim().length >1 ? el.lang : undefined; if (langToAdd && langs.indexOf(langToAdd) === -1) < // If there’s a lang and it isn’t in the array yet, we add it langs.push(langToAdd); >> // Finally we log all the other languages found. console.log(`Other languages found: $`); 

  If you want to cheat your way out of XHTML, then add the following at the very top:

  That said, trying to handle errors kinda opens a can of worms:

  • I’m trimming the value (leading and trailing spaces) for empty value, but that should probably be flagged for non-empty value as well, cf. HTML standard;
  • Also, in the XHTML “cheat code”, I’m adding a lang attribute if there is none (as pure commodity so that the other code can work) but I’m wondering whether that should not be used to check that if both attributes are present, their value must be the same.

  I’ll try updating the code above at some point.

  Here you go, this one will check if language tag is valid, and whether values of xml:lang and lang match.

  I refrained from refactoring too much so that the process be kinda clearer/commented but turned it into functions so that it can be refactored into a JS module more easily – so anyone please feel free to do that if re-using the logic (npm, etc.) and share it.

  // UTILS // Strips leading or trailing spaces from string const trimmer = (string) => < return string.trim(); >// Checks if lang is specified const langIsSpecified = (string) => < string = trimmer(string); if (string.length >1) < return true; >else < return false; >> // Checks if string contains leading or trailing spaces const hasWhitespace = (string) => < return string.length >trimmer(string).length; > // Find and checks validity of the lang for the given element const findLangForEl = (el) => < const langValue = el.lang; if (langIsSpecified(langValue)) < // If lang is specified if (!hasWhitespace(langValue)) < // If value is valid, return value return langValue; >else < // If lang specified for el have a space, then it’s invalid BCP47 so we throw an error console.error(`There is a space in '$' therefore it isn’t a valid BCP47 language tag for element:`, el); > > return undefined; > // FUNCTIONS/METHODS // Handle XHTML (xml namespace) const handleXMLLang = () => < // Query all elements in the DOM const domEls = document.querySelectorAll("*"); // For each, check if there is an xml:lang for (let i = 0; i < domEls.length; i++) < const el = domEls[i]; if (el.hasAttribute("xml:lang") && el.hasAttribute("lang")) < // if there is, and there’s also a lang, make sure their values match: const xmlValue = el.getAttribute("xml:lang"); const langValue = el.getAttribute("lang"); if (xmlValue !== langValue) < // If value is different then it’s an error console.error(`Langs don’t match for element:`, el); >> else if (el.hasAttribute("xml:lang") && !el.hasAttribute("lang")) < // if there is xml:lang but not lang, then add it // Note: this function must be called first so that code below takes over const langValue = el.getAttribute("xml:lang"); el.setAttribute("lang", langValue); >> >; const checkMainLang = () => < // Checking if lang specified for html and body const docLang = findLangForEl(document.documentElement); const bodyLang = findLangForEl(document.body); if (docLang && bodyLang) < // If both HTML and BODY langs are specified if (docLang !== bodyLang) < // We check if they match, and warn if they don’t console.warn( `HTML and BODY langs don’t match. HTML is '$' while BODY is '$'. Main lang will be '$'.` ); > else < // Else we use html’s console.log(`Main lang is '$'.`); > > else if (docLang && !bodyLang) < // If it’s specified for html console.log(`Main lang is '$'.`); > else if (bodyLang && !docLang) < // If it’s specified for body console.warn(`Main lang is '$' but only set on BODY. Elements such as consequently don’t inherit a specified lang and could inherit the navigator’s default.`); > else < // Else we warn no lang is set and the navigator’s default will be used console.warn(`No lang is set, it will default to the navigator’s: $.`) > >; const checkOtherLangs = () => < // Other languages start here, with an empty array let langs = []; // We check all elements in body with a lang attribute const els = document.body.querySelectorAll(`*[lang]`); // For each, we check if we must add the lang to the array for (let i = 0; i < els.length; i++) < const el = els[i]; const langToAdd = findLangForEl(el); // If there’s a lang and it isn’t in the array yet, we add it if (langToAdd && langs.indexOf(langToAdd) === -1) < langs.push(langToAdd); >> // Finally we log all the other languages found. console.log(`Other languages found: $`); >; handleXMLLang(); checkMainLang(); checkOtherLangs(); 

  Источник