本文详解如何将 textarea 中的 HTML 字符串安全注入 div 元素，正确保留原始标签结构（如 、、）及语义换行，避免被 .text() 自动转义或被浏览器忽略。

本文详解如何将 textarea 中的 HTML 字符串安全注入 div 元素，正确保留原始标签结构（如 ``、`

`、`DOMPurify）：

import DOMPurify from 'dompurify';
$('#div').html(DOMPurify.sanitize(htmlContent));

换行处理说明：Textarea 中的换行符（\n）本身不是有效 HTML；若希望换行可见，需将其转换为
或包裹在

/

中。例如：

const safeHtml = htmlContent
  .replace(/&/g, '&')
  .replace(/, '<')
  .replace(/>/g, '>')
  .replace(/\n/g, '<br>');
$('#div').html(safeHtml); // 仅用于纯文本换行 → 不推荐用于富内容

更规范的做法是：鼓励用户输入标准 html（如

第一段

第二段

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

），而非依赖 \n 自动转换。

✅ 正确示例输入（textarea 中）：

<strong>加粗文字</strong>
<a href="https://example.com">这是一个链接</a>

• 列表项1
• 列表项2

提交后，#div 将准确渲染为带样式、可点击、结构完整的 HTML。

总结：用 .html() 替代 .text() 是保留 HTML 标记的核心；但生产环境必须搭配输入校验与 HTML 净化，兼顾功能与安全。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！