用jQuery替换DOM中的所有文本引用

时间:2016-01-01 14:26:58

标签: javascript jquery google-chrome-extension

我试图编写一个chrome扩展来替换网页中所有特定的文本,并使用自定义文本。

我在SO中发现了类似的问题并尝试了以下解决方案,但它似乎不起作用。

   config.text_config = [
        {
            src: "Lorem ipsum",
            target: "live long and prosper"
        }
    ]
   config.text_config.forEach(function (obj) {

        $('*').each(function () {
            var text = $(this).text().replace(obj.src, 'REPLACEMENT_TEXT');
            $(this).text(text);
        })

    });

有人可以帮我一把吗?

1 个答案:

答案 0 :(得分:1)

您可以执行类似操作,以确保替换所有节点的文本:



$(function () {
  $.fn.getTextNodes = function(contentText) {
    return $(this).find(":not(iframe)").addBack().contents().filter(function() {
      return this.nodeType == 3 && this.nodeValue.indexOf(contentText) != -1;
    });
  };
  var config = {}
  config.text_config = [
    {
      src: "Lorem ipsum",
      target: "live long and prosper"
    }
  ];
  config.text_config.forEach(function (obj) {
    var re = new RegExp(obj.src, 'g');
    $('*').getTextNodes(obj.src).each(function(item, element) {
      this.nodeValue = this.nodeValue.replace(re, 'REPLACEMENT_TEXT');
    });
  });
});

<script src="//code.jquery.com/jquery-1.11.3.js"></script>


<div id="Message area">
    <div class="selected-div">
        Operation Lorem ipsum Lorem ipsum 1
    </div>
    <div class="selected-div">
        Operation Lorem ipsum Lorem ipsum 2
    </div>
    <div class="selected-div">
        Operation Lorem ipsum Lorem ipsum 3
    </div>
    <div class="selected-div">
        Operation Lorem ipsum Lorem ipsum4
    </div>
</div>
&#13;
&#13;
&#13;