動態地將span標簽添加到內容可編輯div中的某些單詞

Question

我創建了一個內容可編輯的div，用戶可以在其中編寫評論並標記其他用戶。 隨着用戶的鍵入，將進行API調用以檢查注釋中指定的任何用戶名。

如果某人寫道：“ 此任務將由User123處理。UserABC和UserXYZ可以提供幫助。 ”

這是API響應：

res = [
    {'useremail':"user123@email.com", "start":29, "end": 36},
    {'useremail':"userxyz@email.com", "start":38, "end": 45},
    {'useremail':"userabc@email.com", "start":50, "end": 57}
]

如果找不到用戶名，則響應將為空數組。

現在的問題是，在為注釋中指定的那些用戶名添加跨度標簽以突出顯示它們時。 我知道要突出顯示的文本內容的開始和結束索引。 如何將span標簽動態添加到可編輯div中的給定索引？ 該過程不應打擾正在輸入的用戶。

我更喜歡為此使用純Javascript。 但是我可以使用jQuery。

任何幫助表示贊賞。 如果您需要更多信息，請發表評論。 先感謝您。

Answer 1

我只需要獲取文本，將其剪切，截斷div並用特定的文本塊附加跨接包裝即可。 它不應該打擾用戶。

另外，如果調用innerText ，則將獲取所有后代的文本，因此即使它們在跨區包裝中，您也可以提取整個文本並重新剪切。