textarea换行

2017-08-30

摘要：文本域实现换行并在 p 标签中展示出

javascript 获取 textarea 文本字符串的回车换行符是\n，p 标签中换行需要<br>，因而要将获取的字符串进行替换

1 2	var textarea = document.getElementById("textarea").value; textarea = textarea.replace(/\n/g, '<br>')

同样，将 p 标签中的内容导入 textarea 中要进行逆向操作
虽然这样可以实现效果，但是有一个很严重的问题：这些操作是用户完成的，如果我将含有<br>的字符串直接传到后台存储到数据库，那么我就要使用 vue 中的 v-html 指令进行解析来实现换行效果，这时很有可能遭受 xss 攻击。而且https://vuefe.cn/v2/api/#v-html也有明确的警示：在网站上动态渲染任意HTML是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
这可怎么办？如果将主流程改为使用富文本编辑器，这会增加很多成本，而且移动端的富文本编辑器也没有找到完全符合需求、令人满意的。况且面对的用户主体是年龄偏大的书法艺术家，估计没多少能玩得转。经过深思熟虑，否定了添加富文本编辑器的方案，决定使用v-html指令处理提交的内容。但是需要将提交的内容进行一些处理：先将所有的小于号<替换成<,再强制在所有的<右边添加一个空格，最后再将\n替换为<br>。总之，就是破坏标签的字符串序列，这样v-html指令就无法识别这些标签而是当做普通的字符串显示。

var textarea = document.getElementById("textarea").value; 
textarea = textarea.replace(/<\s*/g, '&lt;');
textarea = replace(/&lt;\s*/g, '&lt; ');
textarea = textarea.replace(/\n/g, '<br>');