有时候我们实现了div的contenteditable属性，但是粘贴的时候有时候会携带html语句。我们需要去掉。
最近把Reader项目的评论框从textarea换成div了, 实现元素的自增高确实方便了, 但随之而来的却是更多的麻烦.
比如, div[contenteditable=true]元素的内容可以是HTML代码, 虽然直接输入不行, 但从网页上复制内容到编辑框却是可以的, 这带来了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标准的对象, 虽然实现起来相比第一种方法要复杂一些, 但这换来了更轻松的代码维护工作.
