Javascript 遍历dom时推断语言属性_Javascript_Attributes

Javascript 遍历dom时推断语言属性

javascript

Javascript 遍历dom时推断语言属性,javascript,attributes,Javascript,Attributes,我在一个网站上工作，网站上有多个语言属性。我试图从每种语言中提取所有文本，但有时语言是从父元素推断出来的，因此每个元素本身可能没有该属性。有时，设置语言属性的元素可以位于节点上方的多个级别例如，如果网站结构如此（简化）：您必须回溯父路径以找到最近的具有lang的父路径，并查看它是否与请求的语言匹配。下面是一个对代码进行了修改的代码段 var findTextNodesWithLangAttribute=function（parentNode，selectedLanguage）{ var t

我在一个网站上工作，网站上有多个语言属性。我试图从每种语言中提取所有文本，但有时语言是从父元素推断出来的，因此每个元素本身可能没有该属性。有时，设置语言属性的元素可以位于节点上方的多个级别

例如，如果网站结构如此（简化）：

您必须回溯父路径以找到最近的具有lang的父路径，并查看它是否与请求的语言匹配。下面是一个对代码进行了修改的代码段

var findTextNodesWithLangAttribute=function（parentNode，selectedLanguage）{
var treeWalker=document.createTreeWalker(
父节点，
/只考虑作为文本节点的节点（节点类型3）
NodeFilter.SHOW_TEXT，
//对象，该对象包含用于acceptNode方法的函数
//NodeFilter的
{
acceptNode:函数（节点）{
//确定是否接受、拒绝或跳过节点的逻辑
//在这种情况下，只接受包含内容的节点
//除了空白
if（！/^\s*$/.test（node.data））{
//测试语言属性
var nearestParentWithLang=node.parentElement；
if（！nearestParentWithLang.hasAttribute（“lang”））{
nearestParentWithLang=\u findNearestParentElementWithLang（node.parentElement）；
}
if（最接近的ParentWithLang.attributes[“lang”].value==selectedLanguage）{
返回NodeFilter.FILTER\u接受；
}
}
}
},
假的
);
var节点列表=[]；
while（treeWalker.nextNode（））nodeList.push（treeWalker.currentNode）；
返回节点列表；
}
函数_findnearestparentelementwith lang（textParent）{
如果（！textParent）返回textParent；
while（textParent）{
if（textParent.hasAttribute（“lang”）返回textParent；
else textParent=textParent.parentElement；
}
}
var langNodes=findTextNodesWithLangAttribute（document.body，“ja”）；
langNodes.forEach（函数（val，ind）{
console.log（val.nodeValue）；
});

氏氏氏氏氏
一个全新的世界
Lorem ipsum dolor sit amet，献祭精英
也称乱数假文或者哑元文本
所有人都有明显的错误

金金金金
金金金金
중중중중중

您必须回溯父路径，找到最近的具有lang的父路径，并查看它是否与请求的语言匹配。下面是一个对代码进行了修改的代码段

var findTextNodesWithLangAttribute=function（parentNode，selectedLanguage）{
var treeWalker=document.createTreeWalker(
父节点，
/只考虑作为文本节点的节点（节点类型3）
NodeFilter.SHOW_TEXT，
//对象，该对象包含用于acceptNode方法的函数
//NodeFilter的
{
acceptNode:函数（节点）{
//确定是否接受、拒绝或跳过节点的逻辑
//在这种情况下，只接受包含内容的节点
//除了空白
if（！/^\s*$/.test（node.data））{
//测试语言属性
var nearestParentWithLang=node.parentElement；
if（！nearestParentWithLang.hasAttribute（“lang”））{
nearestParentWithLang=\u findNearestParentElementWithLang（node.parentElement）；
}
if（最接近的ParentWithLang.attributes[“lang”].value==selectedLanguage）{
返回NodeFilter.FILTER\u接受；
}
}
}
},
假的
);
var节点列表=[]；
while（treeWalker.nextNode（））nodeList.push（treeWalker.currentNode）；
返回节点列表；
}
函数_findnearestparentelementwith lang（textParent）{
如果（！textParent）返回textParent；
while（textParent）{
if（textParent.hasAttribute（“lang”）返回textParent；
else textParent=textParent.parentElement；
}
}
var langNodes=findTextNodesWithLangAttribute（document.body，“ja”）；
langNodes.forEach（函数（val，ind）{
console.log（val.nodeValue）；
});

氏氏氏氏氏
一个全新的世界
Lorem ipsum dolor sit amet，献祭精英
也称乱数假文或者哑元文本
所有人都有明显的错误

金金金金
金金金金
중중중중중

您试过了吗？如果对你有用，就接受答案吧。谢谢@santon它工作得很好！你试过了吗？如果对你有用，就接受答案吧。谢谢@santon它工作得很好！非常感谢。这是一个非常好的解决方案，在我启动的现有treewalker
解决方案中运行良好！谢谢你的帮助！非常感谢。这是一个非常好的解决方案，在我启动的现有treewalker解决方案中运行良好！谢谢你的帮助！
<html>
<body lang="en">
  <header lang="ko">
    <span>氏氏氏氏</span>
    <p lang="en">A whole new world</p>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  <p lang="cn">也称乱数假文或者哑元文本</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
  <footer lang="ja">
    <ul>
      <li>金金金金</li>
      <li>金或金或</li>
      <li lang="ko">중중중중중</li>
      <li>数假</li>
    </ul>
  <footer>
</body>
</html>
</body>

var findTextNodesWithLangAttribute = function(parentNode, selectedLanguage){
    var treeWalker = document.createTreeWalker(
        parentNode,
        // Only consider nodes that are text nodes (nodeType 3)
        NodeFilter.SHOW_TEXT,
        // Object containing the function to use for the acceptNode method
        // of the NodeFilter
        { acceptNode: function(node) {
              // Logic to determine whether to accept, reject or skip node
              // In this case, only accept nodes that have content
              // other than whitespace
              if ( ! /^\s*$/.test(node.data) ) {
                    // Test the language attribute
                    if(node.parentElement.hasAttribute("lang")) {
                        var nodeLang = node.parentElement.attributes["lang"].value;
                    } else if(node.parentNode.parentElement.hasAttribute("lang")) {
          var nodeLang = node.parentNode.parentElement.attributes["lang"].value;
        } else if(node.parentElement.parentElement.hasAttribute("lang")) {
          var nodeLang = node.parentElement.parentElement.attributes["lang"].value;
                    }; 
                  if(nodeLang == selectedLanguage) {
                        return NodeFilter.FILTER_ACCEPT;
                    }
              }
          }
        },
        false
    );

    var nodeList = [];

    while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);

    return nodeList;
}