使用 jQuery，我如何在用户键入时突出显示某个词的所有新出现和现有出现？

Question

我正在构建一个简单的笔记工具，其中某些关键字会在用户键入时自动突出显示，以便他们以后可以轻松找到它们。

我创建了一个 keyup() 函数来侦听文本区域并捕获现有内容，但我不确定如何突出显示所有新内容和现有内容单词（或单词数组）的出现次数。

这是我目前的情况：https://jsfiddle.net/JonMoore/r18v7wpz/44/

$("#txt").keyup(function() {
    var keyword = "test";

  var txt = $(this).val();
  $("#page").text(txt);

  var pos = $("#page").text().search(keyword);
    var pageTxt = $("#page").text();

    if(pos >= 0) { 
    pageTxt.substr(pos, keyword.length).replace('<span class="highlight">' + keyword + '</span>');
    console.log("Ran!");
  }
});

这似乎只捕获了单词的第一次出现，尽管仍然没有像它应该的那样突出显示。如果是部分匹配，则应突出显示整个单词（例如 "testing" 也应突出显示关键字 "test"）。

扩展目标是定义一个包含多个关键字 and/or 短语的数组，每个短语都将适当突出显示，最好是用不同的颜色。

如有任何帮助，我们将不胜感激！

Answer 1

您应该使用 /test/g 而不是 .replace()

这是一个适用于您的案例的示例：

$("#txt").keyup(function() {
  var txt = $(this).val();
  var keyword = "test";
  if (txt.indexOf(keyword) > -1){
    $("#page").html(txt.replace(/test/g,'<span class="highlight">' + keyword + '</span>'));
  }
  else {
    $("#page").html(txt);
  }
});

body {
  margin:0;
  padding: 0;
  font-family: Inter, sans-serif !important;
}
textarea {
  padding: 12x;
  font-family: Inter, sans-serif;
  font-size: 2em;
  height: 1.4em;
}
.highlight {
  color:red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<div id="page"></div>

使用 jQuery，我如何在用户键入时突出显示某个词的所有新出现和现有出现？

Using jQuery, how can I highlight all new and existing occurrences of a word as the user types?

jquery

typing

highlight

keyup