javascript - 按索引位置替换单词

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 响应如下所示:(例如句子:“你好，我叫鲍勃”):

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

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

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

Answer 1

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

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

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

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

您可以使用 textContent 获取没有跨度的文本(进行搜索)。

我假设一个单词可以根据上下文有不同的风格；如果没有，您可以拥有每个 span 的类基于内部单词，这样您就可以在任何地方高效地设置相同单词的样式。