怎样将用户富有文本输入转换为HTML代码？

当前这个事情挺繁杂的，你得较小心，不然网站就完蛋了，一阵见血。。

先来看， 你得了解用户输入的是啥

用户输入的富有文本内容通常包含各种格式，比如加粗、斜体、换行、链接等。在前端开发中，怎样可靠地将这一些内容转换为HTML并展示，是一个很常见但是很不容简单搞的需求。JavaScript提供给了更多种方式处理这一过程，但是你得选对方法，不然就简单出问题。

如果用户只是在textarea中输入带换行和链接的文本， 你能够手动转换：

const text = userInput.replace.replace/g, '');

当前这个方法对比简洁，适用于简洁场景，如聊天框、评论等。但是要因素，如果内容来自不可信用户，需先进行过滤，扯后腿。。

采用innerHTML的风险因素

当用户通过富有文本编辑器输入内容后获取到的内容通常是带有HTML标签的字符串。能够直接插入到页面中：

element.innerHTML = userInput;

有啥说啥... 但是这样做有很较大的风险因素， 这是因为如果用户输入了恶意的JavaScript代码，就有可能引起XSS袭击。所以如果内容来自不可信用户，强较大烈不提议直接采用innerHTML。

采用DOMPurify净化HTML

没准儿… 更稳妥的方式是采用专门的库来净化HTML，举个例子：DOMPurify。DOMPurify 默认会移除脚本、事件属性等存在风险因素内容，同时也保留常见的富有文本格式，适合生产周边环境。

引入DOMPurify：

采用示例：

const clean = DOMPurify.sanitize;
element.innerHTML = clean;

采用DOMParser解析HTML

为了可靠， 能够先用 DOMParser 解析HTML字符串，再遍历节点，移除或保留特定标签：

const parser = new DOMParser;
const doc = parser.parseFromString;
// 遍历doc.body下的节点，进行处理
// ...
// 最后再来看将处理后的节点插入到页面中
element.appendChild;

这种方法对比繁杂，但是对比可靠。

一下