用索引位置替换单词

Question

我正在尝试创建一些写作工具，用于检查某些单词是否针对我的 API 进行标记。这个想法是在用户仍在键盘上键入或完成键入时动态标记单词（在匹配的单词下画红色下划线）。

现在开始，我使用下一个函数来确定用户何时停止输入 1-2 秒（这是获取文本并将其发送到我的 API 的正确时机）：

debounce: function (func, wait, immediate) {
  var timeout;
  return function () {
    var context = this, args = arguments;
    var later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

并像这样使用它：

$(this).on('keyup', debounce(function () {              
    check_words($(this).html());
}, 1000));

所以当我有当前的句子（用户仍然可以继续输入）时，我使用 check_words 函数将 AJAX 调用发送到我的 API 以检查哪些单词应该是标记。

API 返回 JSON 响应如下所示： （例如句子：“你好，我叫 Bob”）：

{
  "markup": [{
    "fromPos": 7,
    "toPos": 8,
    "word": "my"
  }, {
    "fromPos": 15,
    "toPos": 16,
    "word": "is"    
  } 
}

所以这意味着 2 个单词应该是标记（“my”和“is”），我也得到了句子上的单词索引位置，问题是我找不到解决方案/方法如何替换那个单词使用词索引位置的元素？

知道哪个 JS 函数可以帮助我实现这个目标吗？

Answer 1

我不知道用户在哪里输入。我假设它是一个具有属性contenteditable 的容器。在这些上应用样式比 <textarea> 简单得多。

您可以简单地做的是搜索文本中的单词，如果文本中的位置与我们从 API 返回的位置匹配，我们就知道它们没有改变。

现在，您需要注意的是不要在用户键入时移除光标焦点：这会限制您可以对文本进行的更改类型。

我建议您将用户输入的每个单词放入它自己的<span>s 中，每个单词都有它的 id。这样，您可以轻松地对其应用不同的类，而无需对 DOM 进行任何重大更改。这可以通过监听keyup 事件并根据需要开始/结束spans 来完成。

您可以使用textContent 获取不带跨度的文本（进行搜索）。

我假设一个词可以根据上下文有不同的风格；如果不是，你可以让每个 span 的类基于里面的单词，这样你就可以在任何地方有效地设置同一个单词的样式。