需求:对于textarea中输入的换行,要在页面中表现出来。
方案:输入内容在展示时,通过将\r和\n替换为标签,代码如下:
1 2 3 4 5 6 7 8 9 10 |
//输入内容 var content = "1\"2\\3\b4\f5\n6\r7\t8"; //安全过滤 var div = document.createElement("div"); var text = document.createTextNode(content); div.appendChild(text); var html = div.innerHTML; //正则替换 var reg = /(\r\n)|(\n)/g; html.replace(reg, "<br/>"); |
以上代码,在IE9-11、Chrome、Firefox中运行良好,但在IE8下无效。
调试后发现,原来IE8中通过innerHTML拿出的字符串,被移除了\r和\n。
参考资料:
Document.createElement()
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
element.innerHTML
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
Node.nodeValue
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue
Node.textContent
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent