Question

我正在设计各种基本的拼写检查程序。假设我有一个包含以下内容的div：

<div>This is some text with xyz and other text</div>

我的拼写检查程序正确识别div（返回名为current_object的jQuery对象）和单词的索引（在示例的情况下，5（由于从零开始））。

我现在需要做的是用一个例如

这个词包围这个词

<span class="spelling-error">xyz</span>

离开我这样的最终结构：

<div>
    This is some text with 
    <span class="spelling-error">xyz</span> 
    and other text
</div>

但是，我需要在不改变现有用户选择/移动插入/调用方法的情况下执行此操作，例如：

window.getSelection().getRangeAt(0).cloneRange().surroundContents();

换句话说，如果用户正在处理contenteditable文档中的第4个div，我的代码将识别其他div（第1个到第3个）中的问题，而不会从第4个div中删除焦点。

非常感谢！

Answer 1

您已将此帖标记为jQuery，但我认为使用它并不是特别必要。我给你写了一个例子。

https://jsfiddle.net/so0jrj2b/2/

// Redefine the innerHTML for our spellcheck target
spellcheck.innerHTML = (function(text)
{
  // We're using an IIFE here to keep namespaces tidy.

  // words is each word in the sentence split apart by text
  var words    = text.split(" ");
  // newWords is our array of words after spellchecking.
  var newWords = new Array;

  // Loop through the sentences.
  for (var i = 0; i < words.length; ++i)
  {
    // Pull the word from our array.
    var word = words[i];

    if (i === 5) // spellcheck logic here.
    {
      // Push this content to the array.
      newWords.push("<span class=\"mistake\">" + word + "</span>");
    }
    else
    {
      // Push the word back to the array.
      newWords.push(word);
    }
  }

  // Return the rejoined text block.
  return newWords.join(" ");
})(spellcheck.innerHTML);

值得注意的是我对IIFE的使用可以通过将该逻辑移动到自己的函数声明中来轻松复制，以便更好地利用它。

请注意，您还需要在拼写检查实例中考虑标点符号。

在div

1 个答案: