Question

我正在尝试使用以下代码将多个文本的颜色更改为某种颜色：

var search = "bar";
$("div:contains('"+search+"')").each(function () {
    var regex = new RegExp(search,'gi');
    $(this).html($(this).text().replace(regex, "<span class='red'>"+search+"</span>"));
});

但是，代码不能再次运行，我不知道为什么 - 它只会更改最新出现的代码。

这是一个使用它两次的JSFiddle只更改第二次出现：http://jsfiddle.net/PELkt/189/

有人可以解释为什么它在第二次出现时不起作用吗？

Answer 1

有人可以解释为什么它在第二次出现时不起作用吗？

通过调用.text()，您将删除所有HTML标记，包括您刚刚插入的。

这是第一次替换后的标记：

<div id="foo">this is a new <span class='red'>bar</span></div>

$(this).text()将返回字符串"this is a new bar"，其中将"new"替换为（"this is a new bar"）并将其设置为元素的新内容。

为了做到这一点，您必须迭代遍历元素的所有文本节点后代，并单独处理它们。有关实施，请参阅Highlight a word with jQuery。

Answer 2

使用$(this).html()代替$(this).text()，因为 $。fn.text（）剥离了所有的html标记，因此foo被删除了foo。

但是，假设您为foo多次应用相同的高亮显示，那么我建议你应该创建一个与此类似的类来突出显示

var Highlighter = function ($el, initialArray) {
  this._array = initialArray || [];
  this.$el = $el;
  this.highlight = function (word) {
    if (this.array.indexOf(word) < 0) {
      this.array.push(word);
    }
    highlightArray();
  }
  function highlightArray() {
    var search;
    // first remove all highlighting
    this.$el.find("span[data-highlight]").each(function () {
      var html = this.innerHTML;
      this.outerHTML = html;
    });
    // highlight all here
    for (var i = 0; i < this._array.length; i += 1) {
      search = this._array[i];
      this.$el.find("div:contains('"+search+"')").each(function () {
        var regex = new RegExp(search,'gi');
        $(this).html($(this).html().replace(regex, "<span data-highlight='"+search+"' class='red'>"+search+"</span>"));
      });
    }
  }
}

var highlighter = new HighLighter();
highlighter.highlight("foo");

Answer 3

这是另一种方法，可以让您继续使用文字

function formatWord(content, term, className){
        return content.replace(new RegExp(term, 'g'), '<span class="'+className+'">'+term+'</span>');
    }

$(document).ready(function () {

    var content = $('#foo').text();


  var change1 = formatWord(content, 'bar', 'red'),
        change2 = formatWord(change1, 'foo', 'red');

    alert(change2);

    $('body').html(change2);
});

<强> http://codepen.io/nicholasabrams/pen/wGgzbR?editors=1010

Answer 4

很容易修复你的jsfiddle。只需将.text（）替换为.html（）＆amp;你会发现它突出了新的＆amp;两个酒吧都是红色的。

jQuery的.text（）方法将在每次使用时删除所有标记，但你想要做的是使用.html（）来简单地更改已经在DOM中的标记。

$(document).ready(function () { var search = "bar"; $("div:contains('"+search+"')").each(function () { var regex = new RegExp(search,'gi'); $(this).html($(this).html().replace(regex, ""+search+"")); }); search = "new"; $("div:contains('"+search+"')").each(function () { var regex = new RegExp(search,'gi'); $(this).html($(this).html().replace(regex, ""+search+"")); }); });

功能在第二次出现时不起作用？

4 个答案: