domをトラバースしている間に言語属性を推測する

私はそこに複数の言語属性が宣言されているサイトで作業しています。私は各言語からすべてのテキストを抽出しようとしていますが、言語が親要素から推論されることがあるため、各要素自体に属性がない場合があります。時々、言語属性を設定する要素は、ノードの上の多くのレベルになることがあります。例えばdomをトラバースしている間に言語属性を推測する

、Webサイトの構造がそう（簡体字）のようなものである場合：

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

出典

2017-03-28 codeadventurer

あなたは試してみたのですか？それがあなたのために働くなら、先に進み、答えを受け入れてください。どうも。 – santon

ありがとう@サンソンそれは非常にうまく動作します！ – codeadventurer

親パスをバックトラックして、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")) { 
 
      \t \t 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) { 
 
    \t \t if(!textParent) return textParent; 
 
    \t \t while(textParent){ 
 
    \t \t if(textParent.hasAttribute("lang")) return textParent; 
 
     else textParent = textParent.parentElement; 
 
    } 
 
} 
 

 

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

 
langNodes.forEach(function(val, ind) { 
 
\t 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>

出典

2017-03-28 22:31:13 santon

ありがとうございます！これは非常に素晴らしい解決策で、私が始めた既存の 'treewalker'ソリューションの中でうまくいきます！ご協力ありがとうございました！ – codeadventurer

@codeaventurer：それはあなたのために働いた知って良い！ – santon

domをトラバースしている間に言語属性を推測する

答えて

関連する問題