Question

我正在尝试重写this code以满足我的需要，但是我迷失了小提琴手的所有替代魔法。这是我的modified fiddle。

我的目标是找到＆＃34; a＆＃34;的所有事件。该段中的字母并突出显示它们。我无法弄清楚为什么我的信件被1$替换而不是被突出显示。任何人都可以帮我这个吗？

HTML

<div id="searchtext">
  <p>I want to highlight all "a" letters in this paragraph</p>
</div>

JS

$(document).ready(function() {
      var text = 'a';
      var query = new RegExp(text, "gim");
      var e = document.getElementById("searchtext").innerHTML;
      var enew = e.replace(/(<span>|<\/span>)/igm, "");
      document.getElementById("searchtext").innerHTML = enew;
      var newe = enew.replace(query, "<span>1$</span>");
      document.getElementById("searchtext").innerHTML = newe;
    });

CSS：

#searchtext span {
  background-color: #FF9;
  color: #555;
}

Answer 1

使用\$&代替

$(document).ready(function() {
      var text = 'a';
      var query = new RegExp(text, "gim");
      var e = document.getElementById("searchtext").innerHTML;
      var enew = e.replace(/(<span>|<\/span>)/igm, "");
      document.getElementById("searchtext").innerHTML = enew;
      var newe = enew.replace(query, "<span>\$&</span>");
      document.getElementById("searchtext").innerHTML = newe;
    });

#searchtext span {
  background-color: #FF9;
  color: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="searchtext">
  <p>I want to highlight all "a" letters in this paragraph</p>
</div>

More information about $&

简单的JS代码，用于突出显示段落中的搜索文本

1 个答案: