ページにテキストを表示できるすべての要素を取得する方法は？

Question

私は条件を満たすすべてのテキストを別のものに置き換えるスクリプトを書いています。 しかし、私はそれが表示されない/レンダリングされていないスクリプト、スタイルなどの要素のテキストを置き換えることは望ましくありません。 これらの要素を区別する最も良い方法は何ですか？

//Example of idea: 
var elements = document.getElementsByTagName("*"); 
var element; 
var text; 

for(var i=0; i<elements.length; i++){ 
    element = elements[i]; 
    //Need to detect only text that is displayed. 
    text = element.textContent; 
    if(checkText(text)){element.textContent = somethingElse;}//Abstract idea 
} 

Answer 1

あなたはこれがTreeWalkersの目的とdocument.createTreeWalker方法であり、この

$(':contains("targetText")').text("newText"); 

Answer 2

を試みることができる：あなたはまた、（jQueryのスターセレクタを使用することができます

function getTextNodes (root) { 
 

 
    var tw = document.createTreeWalker(root || document.body, NodeFilter.SHOW_TEXT, { 
 
    acceptNode: function(node) { 
 
     return /^(STYLE|SCRIPT)$/.test(node.parentElement.tagName) || 
 
      /^\s*$/.test(node.data) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT 
 
    } 
 
    }) 
 

 
    var result = [] 
 
    while (tw.nextNode()) result.push(tw.currentNode) 
 
    return result 
 
} 
 

 
var textNodes = getTextNodes() 
 

 
// Text nodes before 
 
console.log(
 
    textNodes.map(function (n) { return n.data }) 
 
) 
 

 
// Example text data transformation 
 
textNodes.forEach(function (n) { 
 
    n.data = n.data.toUpperCase() 
 
}) 
 

 
// Text nodes after 
 
console.log(
 
    textNodes.map(function (n) { return n.data }) 
 
)

<p>Lorem ipsum dot dolor sit amet...</p> 
 
<span>More example text!</span> 
 
<style> 
 
    .omitted style { } 
 
</style> 
 
<script> 
 
    'omitted script' 
 
</script>

Answer 3

*）、無視するタグには:not(script)と言ってください。

<script>タグと<style>タグを無視して、 "Test"という内容の要素を "Replaced"に置き換えます。あなたが一致するように期待している条件の種類

$("body *:not(script):not(style)").each(function() { 
 
    if ($(this).text() == "Test") { 
 
     $(this).text("Replaced"); 
 
    } 
 
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> 
 
<div class="content"> 
 
    <h1>Hello World</h1> 
 
    <p>Lorem ipsum...</p> 
 
    <p>Test</p> 
 
    <ul> 
 
     <li>Hello</li> 
 
     <li>World</li> 
 
     <li>Test</li> 
 
    </ul> 
 
</div>