获取 HTML 元素的隐式 lang 属性

Get the implicit lang attribute of an HTML element

本文关键字：lang 属性 HTML 元素 获取      更新时间：2023-09-26

>假设您有一个包含不同语言部分的 HTML 页面，如下所示：

<html lang=en>
<div lang="th">
  <p id="test1">ไทย</p>
</div>
<p id="test2">Implicitly English</p>
<div lang="en-CA">
  <p id="test3">As Canadian as possible under the circumstances</p>
</div>
<p lang="en-AU"id="test4">Explictly Aussie</p>
</html>

有没有直接的方法可以发现哪种特定语言代码适用于给定的HTML元素？像这样：

// pseudo-code
var lang = myElement.getLang()

这似乎是一个非常迂回的解决方案：

function getLang(element) {
  var lang = element.getAttribute("lang")
  if (!lang) {
    var elements
      , languages
      , language
      , ii
      , selector
    // Find all elements with an explicit lang attribute
    elements = [].slice.call(document.querySelectorAll("*[lang]"))
    // Determine which languages are present
    languages = []
    for (ii in elements) {
      lang = elements[ii].getAttribute("lang")
      if (languages.indexOf(lang) < 0) {
        languages.push(lang)
      }
    }
    lang = "" // reset
    for (ii in languages) {
      language = languages[ii]
      selector = ":lang(" + language + ")"
      elements = [].slice.call(document.querySelectorAll(selector))
      if (elements.indexOf(element) > -1) {
        if (lang.length < language.length) {
          lang = language
        }
      }
    }
  }
  return lang
}

有没有更明显的方法？js小提琴

我用以下代码更新了你的小提琴，你可以在这个代码段中运行。这大大简化了它。

function getLang(elem) {
  var lang = "";
  if (elem) {
    var elements = [];
    var queryResult = document.querySelectorAll("[lang]");
    try {
      //Wrapping in a try catch block to handle unsupported browsers.
      elements = [].slice.call(queryResult);
    } catch (error) {
      for (var i = 0, len = queryResult.length; i < len; i++) {
        elements.push(queryResult[i]);
      }
    }
    if (elements.length > 0) {
      //Find in the NodeList where the element is either itself or the first parent with lang attribute of the given element.
      var matches = elements.filter(function(e) {
        return e === elem || e.contains(elem);
      }); //ES2015 -> elements.filter(e => e === elem || e.contains(elem));
      var match = matches.length > 0 ? matches[matches.length - 1] : matches[0];
      lang = match.lang ? match.lang : lang;
    }
  }
  return lang;
}
var result = getLang(document.querySelector("#test1")) + " ";
result += getLang(document.querySelector("#test2")) + " ";
result += getLang(document.querySelector("#test3")) + " ";
result += getLang(document.querySelector("#test4"));
alert(result);
<body lang=en>
  <div lang="th">
    <p id="test1">ไทย</p>
  </div>
  <p id="test2">Implicitly English</p>
  <div lang="en-CA">
    <p id="test3">As Canadian as possible under the circumstances</p>
  </div>
  <p lang="en-AU" id="test4">Explictly Aussie</p>
</body>

相关文章：