javascript - 如何标记与文本混合的单词

Question

我想在您发帖时标记一些单词，例如 Facebook，并使用 jQuery 与文本混合标记一些人。

这是示例:

Answer 1

请查看我的Plunk我相信这就是您所追求的! 我已将 3 个名称的数组(“Dave Smith”、“Test User”、“Jim Dot”)添加到 script.js 文件的顶部。实际上，您可以从数据库中查询并获取前 100 个左右的元素，在 Facebook 示例中，我会根据总互动量获取前 200 个好友姓名。

我的代码适用于 Google Chrome 版本 40.0.2214.115(我尚未测试其他浏览器):

重要的代码是将 contenteditable 属性设置为 true 的 div:

<div id="tag-area" class="tag-area" contenteditable="true">
</div>

重要的 JavaScript 是用于搜索名称数组并将文本包装在“span”元素中的代码:

function ExistsInListOfNamesAndIsNotHiglighted(item) {
   return $("#tag-area").html().indexOf(item) > -1 && $("#tag-area").html().indexOf("<span>" + item + "</span>") === -1;
}

$(function() {
  var tags = ["Dave Smith", "Test User", "Jim Dot"];

  $("#tag-area").keyup(function() {
    $(tags).each(function(index, item) {
      if (ExistsInListOfNamesAndIsNotHiglighted(item)) {
        $("#tag-area").html($("#tag-area").html().replace(item, "<span>" + item + "</span>&nbsp;"));

        cursorToEndOfContentEditable($("#tag-area")[0]);
  }
});

“cursorToEndOfContentEditable”代码取自 Nico Burn 在线程上的回答

How to move cursor to end of contenteditable entity

我还在 span 标签中添加了一些 CSS，它将包裹带标签的文本片段:

span {
  background-color: #D8DFEA; 
  border:1px solid #7688a4;
}

请告诉我你过得怎么样! 如果有任何改进，请随时向我询问:)