JavaScript：快速将文本插入到长文本区域中

Question

我正在玩创建基于HTML-textarea的纯文本编辑器来编辑我的脚本（使用例如Mozilla Prism + localhost install / webserver）。它到目前为止工作正常，但是当我想在光标位置插入一些东西时，当textarea中有大量文本时，它在Firefox中变慢（Chrome工作正常）。例如。在133k填充textarea需要大约1秒来插入4个空格。

我已经拥有并使用elm.selectionStart和elm.selectionEnd。基于这些我然后复制文本，操纵它，并将值设置回textarea - 也许这是导致瓶颈的原因（我之前使用类似的方法as answered on this site）。理想情况下，我可能想要像elm.selectedText ='foobar'这样的东西，但找不到这个......

它不一定需要是crossbrowser ......

有人可以帮忙吗？

Answer 1

根据this article on 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>

也有document.execCommand('insertText')受undo支持，但不是跨浏览器。尝试使用insert-text-textarea来获得跨浏览器的解决方案。