使用jQuery，当用户键入时，如何突出显示单词的所有新出现和现有的出现？

Question

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

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

这是我到目前为止的内容：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”）。
一个扩展目标是定义一个由多个关键字和/或短语组成的数组，每个关键字和/或短语将适当地突出显示，最好以不同的颜色突出显示。
任何帮助将不胜感激！

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>