javascript - 在 div 内的第 n 个单词周围插入跨度

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 的使用，通过将该逻辑移动到它自己的函数声明中以更好地利用它，可以轻松地重现它。

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