JS如何将用户输入的富文本转换为HTML_JS将用户输入的富文本转换为HTML方法-html教程-PHP中文网

JS如何将用户输入的富文本转换为HTML_JS将用户输入的富文本转换为HTML方法

爱谁谁

发布： 2025-10-11 21:30:02

原创

994人浏览过

答案：前端展示富文本需防范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, '<br>')
    .replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
}
document.getElementById("content").innerHTML = textToHtml(userInput);

此方法适用于简单场景，如聊天框、评论等。

基本上就这些。选择哪种方式取决于输入来源和安全要求。用户可控且可信时可用 innerHTML；面向公众内容时，强烈建议使用 DOMPurify 进行净化。

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