替换网页上的非代码文本 [英] Replace non-code text on webpage

问题描述

我通过一系列相关问题进行了搜索，这些问题有助于使用JavaScript替换网站innerHTML，但大多数回复的目标是文本的ID或类别。但是，我可以在跨度或td标记内，可能在其他地方。我终于能够收集一些资源来完成下面的代码：
$ b $ $ $ $ $ $ $ $ $body）。children（） .each（function（）{
$（this）.html（$（this）.html（）。replace（/ \ $ / g，％））;
}）;

上述代码的问题是我在加载的页面上随机看到一些代码工件或其他问题。我认为这与网站代码中存在多个$部分有关，上面的脚本将它转换为％，因此破坏了一切。使用JavaScript或Jquery

<有没有什么方法可以修改代码（JavaScript / jQuery），以便它不会影响代码元素，并只替换可见文本（即> Here<）？

？

感谢！

---编辑---

看起来是我得到与其他代码冲突的是此错误未捕获的TypeError：无法读取未定义的属性'innerText'。所以我猜测有些元素没有innerText（即使它们不符合正则表达式标准），并且会打破其他内联脚本代码。

有没有什么我可以添加或修改代码，如果它不符合正则表达式，就不会尝试使用.replace，或者如果它未定义，则不会替换？

解决方案

批量修改DOM的正则表达式有点危险;最好将你的工作限制在你确定需要检查的DOM节点上。在这种情况下，您只需要文本节点（文档的可见部分。）

这个答案给出了一个方便的方法来选择给定元素中包含的所有文本节点。然后，您可以遍历该列表并根据您的正则表达式替换节点，而不必担心意外修改了周围的HTML标记或属性：

  var getTextNodesIn = function（el）{return $（el）.find（：not（iframe，script））//跳过< script>和< iframe> （）函数（）{}返回this.nodeType == 3; {var txt = $（this）.text（）。trim（）; //修剪周围的空白txt = txt.replace（/ ^ \ $ \d $ / g，％）; //您的正则表达式$ （本）.replaceWith（TXT）;}）执行console.log（$（ '＃富'）HTML（））。 //标签和属性没有改变 

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =foo>一些样本数据，包括朴素正则表达式会跳跃的位：foo< span data-attr =$ 1> bar< i> $ 1< i> $ 12< / span>< div> baz< DIV> < p为H.; $ 2'; / p为H. $ 3< div> bat< / div> $ 0<！ -  $ 1  - > <脚本> //嵌入的脚本标记：console.log（< b> $ 1< / b>）; //不会被替换< / script>< / div>  

I searched through a bunch of related questions that help with replacing site innerHTML using JavaScript, but most reply on targetting the ID or Class of the text. However, my can be either inside a span or td tag, possibly elsewhere. I finally was able to gather a few resources to make the following code work:

$("body").children().each(function() {
        $(this).html($(this).html().replace(/\$/g,"%"));
    });

The problem with the above code is that I randomly see some code artifacts or other issues on the loaded page. I think it has something to do with there being multiple "$" part of the website code and the above script is converting it to %, hence breaking things.using JavaScript or Jquery

Is there any way to modify the code (JavaScript/jQuery) so that it does not affect code elements and only replaces the visible text (i.e. >Here<)?

Thanks!

---Edit---

It looks like the reason I'm getting a conflict with some other code is that of this error "Uncaught TypeError: Cannot read property 'innerText' of undefined". So I'm guessing there are some elements that don't have innerText (even though they don't meet the regex criteria) and it breaks other inline script code.

Is there anything I can add or modify the code with to not try the .replace if it doesn't meet the regex expression or to not replace if it's undefined?

解决方案

Wholesale regex modifications to the DOM are a little dangerous; it's best to limit your work to only the DOM nodes you're certain you need to check. In this case, you want text nodes only (the visible parts of the document.)

This answer gives a convenient way to select all text nodes contained within a given element. Then you can iterate through that list and replace nodes based on your regex, without having to worry about accidentally modifying the surrounding HTML tags or attributes:

var getTextNodesIn = function(el) {
  return $(el)
    .find(":not(iframe, script)") // skip <script> and <iframe> tags
    .andSelf()
    .contents()
    .filter(function() {
      return this.nodeType == 3; // text nodes only
    }
  );
};

getTextNodesIn($('#foo')).each(function() {
  var txt = $(this).text().trim(); // trimming surrounding whitespace
  txt = txt.replace(/^\$\d$/g,"%"); // your regex
  $(this).replaceWith(txt);
})

console.log($('#foo').html()); // tags and attributes were not changed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo"> Some sample data, including bits that a naive regex would trip up on:
  foo<span data-attr="$1">bar<i>$1</i>$12</span><div>baz</div>
    <p>$2</p>
    $3
  <div>bat</div>$0
  <!-- $1 -->
  <script>
    // embedded script tag:
    console.log("<b>$1</b>"); // won't be replaced
  </script>
</div>

这篇关于替换网页上的非代码文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！