在div內插入一個跨越第n個字的範圍

Question

我正在設計一個基本的拼寫檢查器。假設我有以下內容的DIV：

<div>This is some text with xyz and other text</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的問題 - 而不是從第4個DIV移除焦點（1第3）。

非常感謝！

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她的使用可以通過這種邏輯移動到它自己的函數聲明，以更好地利用它很容易地複製。

請注意，您的拼寫檢查實例中還需要考慮標點符號。