本文介绍如何在 node.js 或浏览器环境中，将 mongodb 中存储的带占位符的 html 模板（如 `` 标签包裹的 `@payment - amount to pay`）安全地转换为可读性强、无 html 标签的纯文本邮件正文，并完成占位符的实际值替换。
在实际金融类邮件通知场景中，HTML 模板常以富文本形式（如 WYSIWYG 编辑器输出）存入 MongoDB，其中关键字段以语义化 标签包裹，例如：
@Payment - Amount to Pay
直接将该 HTML 作为邮件正文发送，会导致收件人看到原始标签结构，而非自然语言文本。理想输出应是纯文本、段落连贯、占位符已替换为真实业务值，例如：
Dear Customer, An amount of Rs. 111 for your Loan Account Number 8204221103679 has been received on 24-Jul-2023 ,vide receipt no 1690195463903291. Payment Mode: Cash. Please find the receipt attached below.
✅ 推荐实现方案（两步法）
第一步：用 DOMParser 提取语义化纯文本
textContent 是最安全的 HTML → 文本提取方式，它自动忽略所有标签、脚本和样式，仅保留可视文本内容（含空格与换行），且不执行任何代码，杜绝 XSS 风险。
function htmlToText(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
return doc.body?.textContent?.trim() || '';
}⚠️ 注意：doc.body 可能为 null（如解析失败或无
），务必做空值防护。立即学习“前端免费学习笔记（深入）”；
第二步：预替换占位符后再转文本
由于原始 HTML 中的占位符（如 @Payment - Amount to Pay）位于 标签内，直接调用 textContent 会得到 @Payment - Amount to Pay 字面量，而非期望值。因此需先替换，再提取：
const templateHtml = `...`; // 从 MongoDB 读取的原始 HTML 字符串
// 定义运行时数据映射（通常来自数据库查询或服务层）
const replacements = {
'@Payment - Amount to Pay': '111',
'@Payment - Loan Number': '8204221103679',
'@Payment - Date': '24-Jul-2023',
'@Payment - Receipt Number': '1690195463903291',
'@Payment - Payment Mode': 'Cash'
};
let processedHtml = templateHtml;
Object.entries(replacements).forEach(([placeholder, value]) => {
// 使用全局正则替换，转义特殊字符（如括号、点号）提升健壮性
const escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(escapedPlaceholder, 'g');
processedHtml = processedHtml.replace(regex, value);
});
const plainTextBody = htmlToText(processedHtml);
console.log(plainTextBody);
// 输出：Dear Customer, An amount of Rs. 111 for your Loan Account Number...✅ 优势说明：
- ✅ 安全：全程不使用 innerHTML / eval，无 XSS 风险；
- ✅ 简洁：无需引入第三方库（如 cheerio 或 jsdom），原生 API 足够；
- ✅ 兼容：在浏览器端与 Node.js（需 jsdom 模拟 DOM）均可运行；
- ✅ 可扩展：replacements 对象可动态注入，适配多模板、多语言场景。
? 进阶建议（生产环境）
- 占位符标准化：统一使用 {{key}} 或 {% key %} 语法（比 @xxx 更易正则识别与维护）；
- 空值处理：替换前校验 value != null && value !== undefined，避免出现 undefined 字符串；
- 换行与空格优化：textContent 保留原始空白，可用 .replace(/\s+/g, ' ') 压缩多余空格，提升可读性；
- 错误兜底：对 DOMParser 解析失败（如 HTML 严重 malformed）添加 try-catch，降级为简单正则清除标签（html.replace(/]*>/g, '')）。
通过以上两步组合，即可稳定、安全、高效地将富文本模板转化为专业邮件正文，兼顾开发效率与系统健壮性。
