JS如何将用户输入的富文本转换为HTML_JS将用户输入的富文本转换为HTML方法
答案：前端展示富文本需防范XSS风险，可选innerHTML直接渲染、DOMParser解析过滤、DOMPurify净化或文本转HTML方法。
用户输入的富文本内容通常包含格式，比如加粗、斜体、换行、链接等。在前端开发中，如何安全地将这些内容转换为HTML并展示，是常见需求。JavaScript提供了多种方式处理这一过程。
使用innerHTML直接渲染
当用户通过富文本编辑器（如 Quill、TinyMCE）输入内容后，获取到的内容通常是带有HTML标签的字符串。可以直接插入到页面中：
document.getElementById("content").innerHTML = userInput;注意：这种方式存在XSS（跨站脚本）风险，如果内容来自不可信用户，需先进行过滤。
使用DOMParser解析并过滤危险标签
为了安全，可以先用 DOMParser 解析HTML字符串，再遍历节点，移除或保留特定标签：
const parser = new DOMParser();const doc = parser.parseFromString(userInput, 'text/html');
// 只保留 p、strong、em、a 标签
const allowedTags = ['P', 'STRONG', 'EM', 'A'];
Array.from(doc.body.children).forEach(child => {
if (!allowedTags.includes(child.tagName)) {
child.remove();
}
});
document.getElementById("content").innerHTML = doc.body.innerHTML;
使用第三方库进行净化（推荐）
更稳妥的方式是使用专门的库来净化HTML，例如：DOMPurify。
引入DOMPurify：
使用示例：
const cleanHTML = DOMPurify.sanitize(userInput);document.getElementById("content").innerHTML = cleanHTML;
DOMPurify 默认会移除脚本、事件属性等危险内容，同时保留常见的富文本格式，适合生产环境。
处理纯文本输入模拟富文本效果
如果用户只是在textarea中输入带换行和链接的文本，可手动转换：
function textToHtml(text) {return text
.replace(/&/g, '&')
.replace(/, ' .replace(/>/g, '>')
.replace(/\n/g, '
')
.replace(/(https?:\/\/[^\s]+)/g, '$1');
}
document.getElementById("content").innerHTML = textToHtml(userInput);
此方法适用于简单场景，如聊天框、评论等。
基本上就这些。选择哪种方式取决于输入来源
和安全要求。用户可控且可信时可用 innerHTML；面向公众内容时，强烈建议使用 DOMPurify 进行净化。
