在将粘贴复制到 contenteditable div 时在 chrome 上添加了额外的 div答案

【问题标题】：Extra div added on chrome while copy paste into contenteditable div在将粘贴复制到 contenteditable div 时在 chrome 上添加了额外的 div
【发布时间】：2015-02-11 05:57:47
【问题描述】：

我有 contenteditable div 我只想要原始文本而不是 HTML 内容，同时从任何网站复制粘贴。我得到了一些解决方案并尝试了以下方法

$('[contenteditable]').on('paste',function(e) {
    e.preventDefault();
    var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste something..');
    window.document.execCommand('insertText', false, text);
});

它工作正常，但问题是它在 chrome 浏览器中添加了额外的 div。

有什么想法或更好的解决方案吗？谢谢！

【问题讨论】：

标签： javascript jquery html google-chrome contenteditable

【解决方案1】：

我也遇到过同样的问题，而且有时还会添加 & 等。我使用下面的正则表达式删除了所有的 html 标签。当您调用 blur 事件时，在函数内部使用以下代码删除标签。即使您将内容复制并粘贴到可编辑的 div 中，它也可以工作。

x = x.replace(/(<[^\\>]*>|<br\/>|&amp;|amp;|&lt|&gt;)/g, '');
x = x.trim();

希望这就是你要找的东西

【讨论】：

【解决方案2】：

我们可以使用 jquery 的 .text() 函数来删除所有的 HTML 标签。

$('[contenteditable]').on('paste',function(e) {
    e.preventDefault();
    var text = $(this).text();

    $(this).text(text);
});

【讨论】：