JavaScript：快速将文本插入长文本区域答案

【问题标题】：JavaScript: Quickly insert text into long textareaJavaScript：快速将文本插入长文本区域
【发布时间】：2009-10-03 08:05:57
【问题描述】：

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

我已经拥有并使用了 elm.selectionStart 和 elm.selectionEnd。基于这些，我然后复制文本，对其进行操作，并将值设置回文本区域——也许这就是导致瓶颈的原因（我之前使用过类似的方法as answered on this site）。理想情况下，我可能想要类似 elm.selectedText = 'foobar' 但找不到这个...

不一定需要跨浏览器...

有人可以帮忙吗？

【问题讨论】：

标签： javascript firefox textarea

【解决方案1】：

根据this article on codemirror，使用 designMode 比使用 textarea 更快，因为您可以编辑部分内容而不是一次性编辑整个文本。

【讨论】：

【解决方案2】：

有一个 API 可以替换所选文本：textarea.setRangeText('text')。

这是一个演示：

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

&lt;textarea rows="10" cols="40"&gt;Click anywhere or select any text in here. It will be replaced by WOW&lt;/textarea&gt;

还有document.execCommand('insertText') 支持undo，但它不是跨浏览器。尝试insert-text-textarea 以获得跨浏览器解决方案。

【讨论】：