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

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

`、`DOMPurify）：

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

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

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

更规范的做法是：鼓励用户输入标准 html（如 <p>第一段</p><p>第二段</p>），而非依赖 \n 自动转换。

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

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<strong>加粗文字</strong>
<a href="https://example.com">这是一个链接</a>
<ul><li>列表项1</li><li>列表项2</li></ul>

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

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