当前位置：首页 > 文章列表 > 文章 > 前端 > JS富文本转HTML的实用技巧

JS富文本转HTML的实用技巧

2025-10-21 18:59:54 0浏览收藏

在前端开发中，将富文本内容安全地转换为HTML并展示是常见需求。本文针对JavaScript富文本转HTML的实用方法进行了详细解读，旨在帮助开发者有效应对XSS风险。文章介绍了四种主要方案：直接使用`innerHTML`渲染（需注意XSS风险）、利用`DOMParser`解析并过滤危险标签、借助第三方库如`DOMPurify`进行HTML净化（推荐方案），以及处理纯文本输入模拟富文本效果。针对不同场景，如用户可控内容或面向公众内容，选择合适的方案至关重要。其中，`DOMPurify`因其强大的安全性和便捷性，被推荐用于生产环境，确保富文本内容的安全展示。

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

JS如何将用户输入的富文本转换为HTML_JS将用户输入的富文本转换为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 进行净化。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

html JavaScript 富文本 xss DOMPurify