过滤掉 div 和 oncopy 的 HTML 标签 onpaste答案

【问题标题】：Filter out HTML Tag onpaste for div and oncopy too过滤掉 div 和 oncopy 的 HTML 标签 onpaste
【发布时间】：2011-08-16 11:53:05
【问题描述】：

我的网站中有一个可编辑的DIV 用于发送论坛消息。人们可以编辑他们的消息（粗体、斜体、下划线、添加链接等）

但我希望有人粘贴或删除（- 不需要删除，但粘贴它）他们的文本我希望它进入 DIV 没有 HTML 标记 - 干净，只是文本。（例如，如果有人要文字并将文本设置为 200 磅大小，然后将其复制并粘贴到我的 DIV 中，他们将收到非常不同的信息......我不希望它发生）。

如何扫描来自剪贴板的文本以删除任何 HTML 标记，然后将其粘贴到 DIV？

<html>
<head>
<script type="text/javascript" language="javascript">

function PasteFilter()
{
//windows.clipboardData filter on paste to go here
}

function CopyFilter()
{
//windows.clipboardData filter on copy to go here
}

</script>
</head>
    <body>
        <Div class="body" onpaste="PasteFilter()" oncopy="CopyFilter">
        <!-- div content goes here.-->
        </Div>
    </body>
    </html>

我也想对 COPY 应用相同的过滤器。

谢谢

【问题讨论】：

标签： javascript internet-explorer filter onpaste oncopy

【解决方案1】：

我相信有两种方法可以做到这一点：

1) 简单的方法 - 在 PasteFilter() 中插入以下代码：

var foo = window.clipboardData.getData('Text');
window.clipboardData.setData('Text', foo);

第一行获取clipboardData的Text值（已经去掉了HTML标签）第二行将剪贴板数据设置为纯文本... （在 IE8 上测试）

2) 另一种方式 - 如果出于某种原因不适合您..

在 PasteFilter() 中，您会触发另一个具有小延迟超时的函数。在该函数中，您获取 DIV 的 innerHTML 内容并运行正则表达式以删除所有标签。

例子：

function PasteFilter()
{
    setTimeout('foo()', 200);
}

function foo()
{
    var contents = document.getElementById("test").innerHTML;

    var new_contents = contents.replace(/(<([^>]+)>)/g, ""); // taken from http://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/

    document.getElementById("test").innerHTML = new_contents;
}

这种方法的问题是你失去了插入符号的位置......

希望这会有所帮助...

【讨论】：

谢谢佩里。将尝试这两种技术，还将检查正则表达式的效率以获取更大的内容。但我想保留所有已经在可编辑 div 中的 html 标签。让我先尝试操纵 window.clipboarddata。谢谢。
据我所知window.clipboardData 仅在 IE 中可用？