如何获取可以在页面上显示文本的所有元素？

我想编写一个脚本来替换满足条件的所有文本。但是，我不希望它替换未显示/呈现的元素（如脚本，样式等）中的文本。区分这些元素的最佳方式是什么？如何获取可以在页面上显示文本的所有元素？

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

来源

2017-03-18 Damien Golding

什么类型的你期望相匹配的条件。你能否提供一些细节？ –

@ajaiJothi条件并不完全确定，但像“是这个类别的词”。问题是我想在任何页面上使用该脚本而不会导致脚本，样式等标签出现问题，而且我不确定还有多少（meta，old legacy tags）。为了得到我正在检查.textContent的文本，但不幸的是，这包括脚本标记内的javascript。理想情况下，像.isRendered这样的属性会与用于元，脚本，样式等的其他.textContent区分开来。如果有人知道其他人是如何处理这个的，那也可以。 –

你可以试试这个

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

来源

2017-03-18 03:44:22 stackoverfloweth

这是TreeWalkers目的和document.createTreeWalker方法：

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>

来源

2017-03-18 03:56:04 gyre

您还可以使用jQuery的明星选择（ *）并将:not(script)指定给您要忽略的标记。

以下内容将替换内容为“测试”和“替换”的任何元素，同时忽略任何<script>和<style>标记。

$("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>

来源

2017-03-18 04:00:47 Vallentin

如何获取可以在页面上显示文本的所有元素？

回答

相关问题