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

你可以试试这个

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您还可以使用jQuery的星标选择器（*）并对要忽略的代码说:not(script)。

以下内容将替换内容为“Test”且“已替换”的所有元素，而忽略任何<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>

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

3 个答案: