JavaScript：快速將文本插入較長的文本區域

Question

我正在創建一個基於HTML文本區域的純文本編輯器來編輯我的腳本（例如使用Mozilla Prism +本地安裝/網絡服務器）。 到目前為止，它仍然可以正常工作，但是當我想在光標位置插入某些內容時，在Firefox中，當文本區域中有很多文本時，它會變慢（Chrome可以正常工作）。 例如，在文本區域填充133k時，大約需要1秒鍾才能執行插入4個空格的操作。

我已經擁有並使用elm.selectionStart和elm.selectionEnd。 基於這些，我然后復制文本，進行操作，然后將值設置回textarea中-可能是造成瓶頸的原因（我使用的方法與之前在此站點上回答的方法類似）。 理想情況下，我可能希望擁有類似elm.selectedText ='foobar'的東西，但是找不到此...

不一定需要是跨瀏覽器...

有人可以幫忙嗎？

Answer 1

根據有關codemirror的文章 ，使用designMode比使用textarea更快，因為您可以編輯部分內容，而不是一次性編輯整個文本。

Answer 2

有一個API可以替換選定的文本： textarea.setRangeText('text') 。

這是一個演示：

 const textarea = document.querySelector('textarea'); textarea.addEventListener('click', () => { textarea.setRangeText('WOW'); }); 

 <textarea rows="10" cols="40">Click anywhere or select any text in here. It will be replaced by WOW</textarea> 

還有帶有undo支持的document.execCommand('insertText') ，但它不是跨瀏覽器的。 嘗試使用insert-text-textarea獲得跨瀏覽器的解決方案。