在线Html编辑器粘贴过滤技术详解（二）.doc

 HYPERLINK /tonyqus/archive/2010/06/03/html_editor_paste_filter2.html 在线Html编辑器粘贴过滤技术详解（二） 作者：Tony Qu 本章我们将来说一说filterPasteData函数的实现。 上篇中提到我们采用的粘贴方式是浏览器自己提供的，只是使用了不少技巧，使得粘贴的东西不直接进入Html编辑器的iframe，所以从某种意义上讲，我们获得的粘贴数据内容都是html。根据我们之前所说的三种需求，文本、html以及Word内容，我们可以把过滤的内容分为两大类： a. html b. Word xml 之所以纯文本可以当做html就是因为贴进来就是当html处理了，只不过是不带标签的html。 ? 说到过滤，自然要做匹配和替换，于是我们很自然的想到了正则表达式，先来处理比较简单的html过滤。我定义了以下一些规则： * 移除html, body, form, doctype, head, script,style, textarea, button,select, option, input,span标签 * 移除id, name, class, language,type属性 * 移除on开头的属性，如onclick * 移除a, table, tr,td,tbody, thead, th, img,input,iframe, div标签（我们的系统中不支持table） * 移除换行符（\n, \r） 以上这些标签都是要移除的对象，因为它们并没有给系统带来任何好处，还会降低安全性。当然根据实际需要，你可以适当保留一些标签，比如select, button, input, img, table等 function FilterPasteText(str) { ??? str = str.replace(/\r\n|\n|\r/ig, ); ??? //remove html body form ??? str = str.replace(/\/?(html|body|form)(?=[\s\/])[^]*/ig, ); ??? //remove doctype ??? str = str.replace(/(!DOCTYPE)(\n|.)*?/ig, ); ??? //remove xml tags ??? str = str.replace(/(\/?(\?xml(:\w+)?|xml|\w+:\w+)(?=[\s\/]))[^]*/gi,); ??? //remove head ??? str = str.replace(/head[^]*(\n|.)*?\/head/ig, ); ??? //remove xxx / ????str = str.replace(/(script|style|link|title|meta|textarea|option|select|iframe|hr)(\n|.)*?\//ig, ); ??? //remove empty span ??? str = str.replace(/span[^]*?\/span/ig, ); ??? //remove xxx.../xxx ??? str = str.replace(/(head|script|style|textarea|button|select|option|iframe)[^]*(\n|.)*?\/\1/ig, ); ??? //remove table and a tag, img tag,input tag (this can help filter unclosed tag) ??? str = str.replace(/\/?(a|table|tr|td|tbody|thead|th|img|input|iframe|div)[^]*/ig, ); ??? //remove bad attributes ??? do { ??????? len = str.length; ??????? str = str.replace(/([a-z][^]*\s)(?:id|name|language|type|class|on\w+|\w+:\w+)=(?:[^]*|\w+)\s?/gi, $1); ??? } while (len != str.length); ??? ????return str; } 这里str.replace(/(html|body|form)[^]*([\s\S]+)\/\1/ig, “$2”)的意思是保留html/html里面的内容，但是移除html标签本身。 这里str.replace(/input(\n|.)*?/ig