如何安全地将文本域内容（含 HTML 标签）渲染到 div 中-html教程-PHP中文网

如何安全地将文本域内容（含 HTML 标签）渲染到 div 中

本文详解如何使用 jQuery 的 .html() 方法，将 textarea 中的原始 HTML 字符串（如、、等）原样解析并渲染到 div 中，同时提醒关键安全风险与换行处理方案。

本文详解如何使用 jquery 的 `.html()` 方法，将 textarea 中的原始 html 字符串（如 ``、`

`、`` 等）原样解析并渲染到 div 中，同时提醒关键安全风险与换行处理方案。

在 Web 表单中，常需将用户输入的富文本（例如带格式的说明、简易 HTML 片段）实时预览到页面某区域。但若误用 .text() 方法，浏览器会将所有 HTML 标签转义为纯文本（如 Hello 显示为字面量），而 .html() 才是正确解析并渲染 HTML 结构的方法。

✅ 正确做法：使用 .html() 替代 .text()

function updateDiv() {
  const $textarea = $('#textarea');
  const rawHtml = $textarea.val();
  console.log('Raw input:', rawHtml); // 如：<b>加粗</b><p>段落</p>
  $('#div').html(rawHtml); // ✅ 解析并渲染 HTML
}

⚠️ 重要注意事项：

XSS 安全风险：.html() 会直接执行 HTML 字符串中的脚本（如 <script>alert(1)</script>）。生产环境务必对输入做严格过滤或使用 DOMPurify 等库消毒：

Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载
```
npm install dompurify
```
```
import DOMPurify from 'dompurify';
$('#div').html(DOMPurify.sanitize(rawHtml));
```

换行符不会自动转
：Textarea 中的回车（\n）在 HTML 中默认不换行。如需保留段落结构，可先将换行转为
或

：

// 方案1：简单换行（适合纯文本+少量格式）
const safeHtml = rawHtml.replace(/\n/g, '<br>');

// 方案2：按空行分段（更接近 Markdown 语义）
const paragraphs = rawHtml.split('\n\n').map(p => `<p>${p.replace(/\n/g, '<br>')}</p>`).join('');
$('#div').html(paragraphs);

? 总结：