[实例] JS过滤HTML

ExtJS中的方法:

Ext.util.Format.stripTags(msg) //去除HTML标签: /<\/?[^>]+>/gi

====================

必须先声明, 这种方法是比较不严谨的, 只用于处理简单的情况

write html parser

需求: 在HTML编辑器提交时, 一般会先在外层封装一些HTML代码, 所以直接检测消息内容是否为空一般返回的是false, 所以应该先将HTML内容处理成纯文本来进行判断.

脑袋一闪而过一个问题: 上传的图片也被过滤掉了...只传一张图片的话也会被理解成消息为空- -||||...所以一个bug就这样产生了...

添加一个判断条件str.indexOf('<img') === -1, 就可以解决这个问题了

还有只发送一个链接也是同样的情况str.indexOf('<a') === -1

其它用途: 判断编辑器中 字数 或 保存到数据库时过滤掉HTML保存 等

function filterHTML(str) {
  str = str.replace(/<\/?[^>]+>/g, ''); // 去除HTML tag
  str = str.replace(/[ | ]*\n/g, '\n'); // 去除行尾空白
  str = str.replace(/\n[\s| | ]*\r/g, '\n'); // 去除多余空行
  str = str.replace(/&nbsp;/ig, ''); // 去掉&nbsp;
  return str;
}

使用: filterHTML("<htmltag 这些内容被过滤掉了>要保留的内容</htmltag>")

输出为: 要保留的内容

• \n 换行符
• \r 回车符
• \s 等同于[\f\n\r\t\u000B\u0020\u00A0\u2028\u2029]。这是Unicode空白符的一个不完全子集。\S则表示与其相反的
• g 全局匹配
• i 大小写不敏感

参考了: js过滤HTML标签以及&nbsp, 但发现它给的例子解释是错误的.

实际应用时, 得考虑要过滤的HTML的格式是怎样的, 处理特殊情况. 比如上面的插入图片问题, 不能忽略.