gpt4 book ai didi

javascript - 遍历 dom 时推断语言属性

转载 作者:行者123 更新时间:2023-11-28 04:49:19 24 4
gpt4 key购买 nike

我正在开发一个网站,其中声明了多种语言属性。我试图从每种语言中提取所有文本,但有时该语言是从父元素推断出来的,因此每个元素本身可能没有该属性。有时,设置语言属性的元素可以比节点高很多层。

例如,如果网站结构如下(简化):

<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>

获取所有具有 lang 属性的元素并不是一个好的解决方案,因为这样就不再包含没有 lang 标记的节点。我尝试使用此代码创建一个解决方案,但如果父级设置了上面的许多先前元素,它就无法正常工作。也许我可以采取不同的方法?或者也许对此解决方案进行调整会效果很好?

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;
}

最佳答案

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

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
var nearestParentWithLang = node.parentElement;
if (!nearestParentWithLang.hasAttribute("lang")) {
nearestParentWithLang = _findNearestParentElementWithLang(node.parentElement);
}
if ( nearestParentWithLang.attributes["lang"].value == selectedLanguage) {
return NodeFilter.FILTER_ACCEPT;
}
}
}
},
false
);

var nodeList = [];

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

return nodeList;
}

function _findNearestParentElementWithLang(textParent) {
if(!textParent) return textParent;
while(textParent){
if(textParent.hasAttribute("lang")) return textParent;
else textParent = textParent.parentElement;
}
}


var langNodes = findTextNodesWithLangAttribute(document.body, "ja");

langNodes.forEach(function(val, ind) {
console.log(val.nodeValue);
});
<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>
</ul>
</footer>
</body>

关于javascript - 遍历 dom 时推断语言属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43080301/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com