contenteditable去除html标签

2021-01-18 13:52:18

有时候我们实现了div的contenteditable属性,但是粘贴的时候有时候会携带html语句。我们需要去掉。

最近把Reader项目的评论框从textarea换成div了, 实现元素的自增高确实方便了, 但随之而来的却是更多的麻烦.

比如, div[contenteditable=true]元素的内容可以是HTML代码, 虽然直接输入不行, 但从网页上复制内容到编辑框却是可以的, 这带来了2个问题:

  1. 评论框的内容不统一, 排版混乱, 影响用户体验, 并且评论框本身期望的内容就是纯文字.

  2. 允许HTML代码提交会存在安全方面的问题.

原先的textarea在这方面就完全不用顾虑, 因为它可输入的内容就只有纯文字, 而且还支持input等表单元素特有的事件.

对于div[contenteditable=true], 我们需要用很多的代码将其实现成一个编辑器, 这对于快速开发的项目而言, 太不合适了, 那怎么办? 退回textarea吗? 若是退回textarea, 就无法轻松实现一些高级的功能, 而且这两种元素差别挺大, 并不方便切换.

所以有这样一种方法, 移除div[contenteditable=true]中的不安全HTML标签:


text = text.replace(/<[\/\s]*(?:(?!div|br)[^>]*)>/g,'')


这段代码会移除除了div和br以外的所有HTML标签, 但我们需要在用户输入时执行它, 所以免不了额外的计算消耗.

需要执行这段代码的事件有blur, paste, keyup, 而且在触发之前可能还需要设置一个timeout, 不然就无法获取到内容. 这些都不是实现功能的最大障碍, 最要命的是我们使用到了正则表达式, 这种东西极难维护, 后患无穷.

实际上, 上面代码给出的正则表达式还留有一个问题, 即无法去除div标签的属性.

所以我不得不再加上另外两行代码:

text = text.replace(/<[\/\s]*(?:(?!div|br)[^>]*)>/g, '')text = text.replace(/<\s*div[^>]*>/g, '<div>')text = text.replace(/<[\/\s]*div[^>]*>/g, '</div>')


也许这里还存在着一些其他的漏洞, 我只想告诉你, 这真的不是一个好的解决方案.

 

另一个解决方案是获取剪切板的纯文本内容, 然后将内容插入到编辑框中, 这样就避免了HTML代码的输入. 该代码只在现代浏览器中可以执行, 对于旧版本的浏览器, 可能需要另设兼容方案:

var clipboard = e.clipboardData,text = clipboard.getData('text/plain'),sel = window.getSelection();if(sel.getRangeAt && sel.rangeCount){var range = sel.getRangeAt(0),frag = document.createDocumentFragment(),node,lastNode;range.deleteContents();var ele = document.createElement("div");ele.innerHTML = text;while(node = el.firstChild){lastNode = frag.appendChild(node);}range.insertNode(frag);if(lastNode){range = range.cloneRange();range.setStartAfter(lastNode);range.collapse(true);sel.removeAllRanges();sel.addRange(range);}}


这段代码需要放在未调用settimeout的paste事件中(beforepaste), 否则将无法获得剪切板内容, 执行完毕后别忘了取消浏览器的默认事件.

这里用到了clipboardData, Selection, Range等W3C标准的对象, 虽然实现起来相比第一种方法要复杂一些, 但这换来了更轻松的代码维护工作.


  • 2019-08-07 09:16:43

    一个比较完美的PWA例子

    但就目前来讲,PWA是Google主推的一项技术标准,FireFox,Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了,Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看,对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段,在不支持渐进式Web应用的浏览器中,你的应用也只是无法使用渐进式Web应用的离线功能而已,除此之外的功能均可以正常使用。

  • 2019-08-07 09:57:48

    spring data jpa 实体类中字段不与数据库表映射

    当我们使用spring data jpa开发的时候,会将实体类中的成员变量与表中的字段一一对应,当我们在实体类中加上一个不与数据库表一一对应的成员变量的时候,此时我们只要在这个成员变量上加上注解@Transient @

  • 2019-08-07 17:16:53

    如何在 Node.js 中使用 import / export 的三种方法

    因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10,How To Enable ES6 Imports in Node.JS 仍然是老大难问题,下面我来介绍三种方法可以让我们在 Node.js 中使用 import/export 。

  • 2019-08-13 08:56:46

    nuxtjs组合element

    添加elementUI 插件,plugins->ele.js,代码如下

  • 2019-08-13 20:06:42

    修改 Nginx 进程最大可打开文件数(worker_processes和worker_connections)

    worker_processes:操作系统启动多少个工作进程运行Nginx。注意是工作进程,不是有多少个nginx工程。在Nginx运行的时候,会启动两种进程,一种是主进程master process;一种是工作进程worker process。例如我在配置文件中将worker_processes设置为4,启动Nginx后,使用进程查看命令观察名字叫做nginx的进程信息,我会看到如下结果:

  • 2019-08-14 09:01:18

    linux下高并发服务器实现

    在做网络服务的时候tcp并发服务端程序的编写必不可少。tcp并发通常有几种固定的设计模式套路,他们各有优点,也各有应用之处。下面就简单的讨论下这几种模式的差异:

  • 2019-08-14 13:18:59

    Linux系统下CPU使用(load average)梳理

    在平时的运维工作中,当一台服务器的性能出现问题时,通常会去看当前的CPU使用情况,尤其是看下CPU的负载情况(load average)。对一般的系统来说,根据cpu数量去判断。比如有2颗cup的机器。如果平均负载始终在1.2以下,那么基本不会出现cpu不够用的情况。也就是Load平均要小于Cpu的数量。

  • 2019-08-14 14:27:35

    计算密集型和IO密集型

    在进行I/O操作的时候,是将任务交给DMA来处理,请求发出后CPU就不管了,在DMA处理完后通过中断通知CPU处理完成了。I/O操作消耗的cpu时间很少.