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));

因此，当我使用当前的sentense（用户仍然可以继续输入）时，我使用 check_words 函数向我的API发送AJAX调用以检查哪些字应该是标记。

API返回JSON响应如下所示：（例如句子：“你好我的名字是Bob ”）：

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

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

知道哪个JS功能可以帮助我实现这个目标？

Answer 1

我不知道用户输入的确切位置。我假设它是一个属性为contenteditable的容器。在这些上应用样式比使用<textarea>简单得多。

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

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

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

您可以使用textContent获取没有跨度的文本（搜索）。

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

按索引位置替换单词

1 个答案: