通過索引位置替換單詞

我正在嘗試創建一些寫入工具，它會針對我的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功能AJAX調用發送給我的API來檢查哪些話應該是標記。

API返回的JSON迴應是這樣的：（例如一句：「你好我的名字是鮑勃‘）：

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

所以這意味着2個字應該是標記（’我」和「是」），我也得到了這個詞的索引位置，問題是我找不到解決方案/方法如何用元素索引位置替換元素上的單詞？

任何想法哪些JS功能可以幫助我實現這一目標？

來源

2017-05-25 user2678018

既然你已經開始和單詞的末尾位置，你嘗試這種解決方案https://stackoverflow.com/a/2236257/1593188 – Erfan

但我怎麼能執行元件本身對這個解決方案？（因爲我不能使用源的內容，因爲從那個時候它可能會再次發生變化 - 用戶也許仍然打字） – user2678018

天真的方法是開始和結束位置與「詞」之間的內容從Ajax調用進行比較，如果它們是相似的替換否則根據當前文本再次調用ajax調用。 – Erfan

我不知道用戶在哪裏輸入。我認爲它是一個屬性爲contenteditable的容器。在這些應用樣式比<textarea>簡單得多。

，你可以簡單地做什麼，是搜索文本的話，如果在文本中的位置，我們瞭解從API後面的位置相匹配，我們知道，他們並沒有改變。

現在，您需要注意的是在用戶輸入時不會移除光標焦點：這限制了您可以對文本進行的更改類型。

我建議你將用戶類型的每個單詞放入它自己的<span> s，每個單詞都帶有id。這樣，您可以輕鬆地應用不同的類，而不對DOM做任何重大更改。這可以通過聽取keyup事件和根據需要開始/結束spans來完成。

您可以使用textContent獲得無跨度文本（進行搜索）。

我假設一個詞根據上下文可以有不同的風格;如果不是的話，你可以將每個span的課程都基於裏面的單詞，這樣你就可以高效地在任何地方設計相同的單詞。

來源

2017-05-25 09:46:15 squgeim

聽起來像真的很好的解決方案，但我怎麼能在用戶仍然打字時用跨度扭曲每個單詞？任何想法？我可以使用$（this）.html（）。split（''）.pop（）;得到最後一句話，但我如何包裝它在一個跨度和注入回來，而用戶仍然打字？ – user2678018

您可以從這裏開始：https：//developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content;並查看'execCommands'：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand 我正在開發一個工作演示。 – squgeim

我也試圖玩它..仍然沒有解決方案的工作 – user2678018

通過索引位置替換單詞

回答

相關問題