【去除样式】jquery粘贴内容时去除样式，仅粘贴文本

• 本文收录于《HTML5与jQuery教程》专栏，此专栏聚焦于HTML5网页开发中的技巧与常用方法，将持续更新，欢迎大家订阅！
• ​​个人主页：有梦想的程序星空
• ​​个人介绍：小编是人工智能领域硕士，全栈工程师，深耕Flask后端开发、数据挖掘、NLP、Android开发、自动化等领域，有较丰富的软件系统、人工智能算法服务的研究和开发经验。
• ​​如果文章对你有帮助，欢迎​​关注、​​点赞、​​收藏、​​订阅。

问题：有时候，针对contenteditable="true"的<div>元素或是<table>元素，在粘贴内容时会将文本的标签样式如<span style="color:green"></span>一起粘贴过来，造成网页上内容提取时出现问题。

解决方法：

针对contenteditable="true"的<table>元素，其中包含id为tbody_test的<tbody>元素。

<table contenteditable="true">
    <tbody id="tbody_test">
    </tbody>
</table>

使用DOM操作动态添加了多个class="td_test_class"的<td>子元素

使用如下jquery的paste事件方法去除样式：

$("#tbody_test").on('paste',"#tbody_test .td_test_class", function(e){        
        e.stopPropagation();
        e.preventDefault();
        var text = '', event = (e.originalEvent || e);
        if (event.clipboardData && event.clipboardData.getData) {
            text = event.clipboardData.getData('text/plain');
        } else if (window.clipboardData && window.clipboardData.getData) {
            text = window.clipboardData.getData('Text');
        }
        //去除文本头尾的空白符
        text = text.trim();

        if (document.queryCommandSupported('insertText')) {
            document.execCommand('insertText', false, text);
        } else {
            document.execCommand('paste', false, text);
        }
})

以上方法去除了剪贴板内容中的样式，使得剪贴板保留纯文本内容。

扩展：

（1）如果td元素中本身存在空格、换行符等内容，可以采用如下方式去除：

function noSpaceBr(text){
    text = text.replace(/ /ig, "");
    text = text.replace(/<br>/ig, "");
    text = text.trim();
    return text
}

（2）也可以采用以下方式去除部分html标签的样式：

function noHtmlTag(str){
　　return str.replace(/<[^>]+>/g,"");
}

关注微信公众号【程序遇上智能星空】，了解软件系统和人工智能算法领域的前沿知识，让我们一起学习、一起进步吧！