答案：前端展示富文本需防范XSS风险，可选innerHTML直接渲染、DOMParser解析过滤、DOMPurify净化或文本转HTML方法。

用户输入的富文本内容通常包含格式，比如加粗、斜体、换行、链接等。在前端开发中，如何安全地将这些内容转换为HTML并展示，是常见需求。J*aScript提供了多种方式处理这一过程。

使用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：

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情

使用示例：

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 进行净化。

以上就是JS如何将用户输入的富文本转换为HTML_JS将用户输入的富文本转换为HTML方法的详细内容，更多请关注其它相关文章！

# html  # 富文本  # javascript  # java  # js  # 前端  # 前端开发  # cdn  # .net  # 转换为  # 如何将  # 移除  # 显示效果  # 换行  # 快速查找  # 这一  # 遍历  # 适用于  # 相关文章  # 七台河优化seo  # 铁岭seo优化公司必看  # 湖北省营销推广加盟  # 清远网站竞价推广策划  # 辽宁省建设厅网站链接  # 成都网站建设管理  # 昆明最好的网站建设企业  # 雪糕营销推广方案怎么写  # 营销推广算法分析  # 南京360关键词排名