在前端开发中，用户输入富文本后需要将其转换为可渲染的HTML是常见需求，比如评论区、文章编辑器等场景都会用到。下面介绍几种常用的实现方法。
原生JS基础转换方式
如果富文本内容本身已经是符合规范的HTML片段，且不需要额外的安全处理，可以直接通过DOM操作实现渲染。核心思路是将富文本内容赋值给容器的innerHTML属性，浏览器会自动解析其中的HTML标签。
// 获取用户输入的富文本内容
const userRichText = '<p>这是用户加粗的<strong>富文本内容</strong></p>';
// 获取用于渲染的容器
const container = document.getElementById('rich-text-container');
// 直接赋值innerHTML完成转换渲染
container.innerHTML = userRichText;这种方式非常简单，但存在明显的安全风险，如果富文本中包含恶意脚本，会直接执行，因此只适合完全可控的富文本场景。
带安全过滤的转换方式
为了规避XSS攻击风险，在转换前需要对富文本进行安全过滤，移除可能执行脚本的标签和属性。下面的示例实现了基础的过滤逻辑，只保留安全的标签和属性。
function safeRichTextToHtml(richText) {
// 创建临时容器解析富文本
const tempDiv = document.createElement('div');
tempDiv.innerHTML = richText;
// 定义允许的标签列表
const allowedTags = ['p', 'div', 'span', 'strong', 'em', 'ul', 'li', 'br'];
// 遍历所有子节点
const allElements = tempDiv.querySelectorAll('*');
allElements.forEach(el => {
// 如果标签不在允许列表中，替换为文本内容
if (!allowedTags.includes(el.tagName.toLowerCase())) {
el.outerHTML = el.textContent;
}
// 移除所有on开头的事件属性
Array.from(el.attributes).forEach(attr => {
if (attr.name.startsWith('on')) {
el.removeAttribute(attr.name);
}
});
});
return tempDiv.innerHTML;
}
// 使用示例
const userInput = '<p onclick="alert(1)">测试<script>alert(2)</script>内容</p>';
const safeHtml = safeRichTextToHtml(userInput);
document.getElementById('safe-container').innerHTML = safeHtml;使用第三方库实现转换
如果需要更完善的过滤规则，或者处理的富文本格式复杂，推荐使用成熟的第三方库，比如DOMPurify，它可以高效过滤富文本中的恶意内容，同时保留合法的HTML结构。
// 先引入DOMPurify库，这里假设已经通过script标签引入
const userRichText = '<p>用户内容<img src="x" onerror="alert(1)"></p>';
// 使用DOMPurify进行安全过滤
const cleanHtml = DOMPurify.sanitize(userRichText);
// 渲染过滤后的HTML
document.getElementById('purify-container').innerHTML = cleanHtml;DOMPurify会默认过滤所有危险的标签和属性，同时支持自定义配置，比如允许特定的标签、属性，能够满足大部分场景的需求。
注意事项
- 转换前一定要确认富文本内容的来源，不可信的内容必须做安全过滤，避免XSS攻击。
- 如果富文本中包含用户输入的特殊字符，比如<、>等，需要提前做好转义，避免解析异常。
- 不同浏览器对HTML的解析规则略有差异，测试时建议在多浏览器环境下验证渲染效果。
- 如果富文本中包含图片、视频等资源，需要额外校验资源地址的合法性，避免加载恶意资源。
| 转换方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 原生innerHTML直接赋值 | 实现简单，无额外依赖 | 无安全过滤，风险高 | 完全可控的内部富文本内容 |
| 自定义过滤转换 | 可定制化过滤规则 | 规则不完善易留漏洞 | 简单场景的轻量过滤需求 |
| 第三方库（如DOMPurify） | 过滤规则完善，安全性高 | 需要引入额外依赖 | 用户提交的不可信富文本内容 |
提示：生产环境中优先选择成熟的第三方库处理富文本转换，不要自行实现复杂的安全过滤逻辑，避免遗漏安全风险。
以上就是JS将用户输入富文本转换为HTML的几种常用方法，开发者可以根据实际场景选择合适的方案，同时注意保障转换过程的安全性。
富文本转换JavaScriptHTML渲染内容转义用户输入处理修改时间：2026-05-25 11:07:08