如何使用JavaScript正则表达式从HTML中提取pre-header内容

针对固定HTML结构（pre-header为body标签后第一个带display: none样式的div），不需要引入第三方解析库，用正则加原生API就能实现，以下是可直接运行的代码：

1. 匹配目标div的正则写法 #

pre-header是邮件模板的固定结构，内部不会嵌套复杂div，正则完全可以稳定匹配，不需要上重量级HTML解析器。正则做了宽松兼容，能适配body标签带任意属性、style属性里display:none写法有空格/位置差异的场景：

// 正则匹配规则：
// - 忽略<body>标签上的所有属性，定位到body起始标签闭合位置
// - 跳过标签后可能存在的换行、空格
// - 捕获紧跟的第一个div，要求其style属性包含display: none（兼容写法空格，比如display : none、display:none;都能识别）
const preHeaderMatchRegex = /<body[^>]*>\s*(<div\s+[^>]*style\s*=\s*["'][^"']*display\s*:\s*none[^"']*["'][^>]*>[\s\S]*?<\/div>)/i;

如果HTML字符串调用match(preHeaderMatchRegex)返回null，就判定为未配置符合规则的pre-header；返回结果的第1项就是捕获到的完整pre-header div字符串。

2. 提取div内纯文本、处理HTML转义 #

不要自己手写HTML实体映射表，漏转义的概率很高，直接用原生DOM能力解码最稳妥，能覆盖—、 、数字实体等所有转义格式：

function getPreHeaderText(htmlString) {
  const matchRes = htmlString.match(preHeaderMatchRegex);
  if (!matchRes) return '';
  const preHeaderDiv = matchRes[1];

  // 用DOMParser解析内容，自动处理所有HTML转义
  const parser = new DOMParser();
  const doc = parser.parseFromString(preHeaderDiv, 'text/html');
  const rawText = doc.body.firstChild?.textContent || '';

  // 移除首尾空白、邮件pre-header常用的零宽填充字符
  return rawText.trim().replace(/[\u200B-\u200D\uFEFF]/g, '');
}

调用示例 #

const demoHtml = `<!DOCTYPE html><html>
<head>...</head>
<body dir="ltr" style="padding: 0; margin: 0"><div style="display: none; max-height: 0px; overflow: hidden;">This is my preheader &mdash; </div><table cellspacing="0" cellpadding="0" style="width: 100%">
页面其他内容
</body></html>`;

console.log(getPreHeaderText(demoHtml));
// 输出结果：This is my preheader —

补充说明 #

• 如果运行环境是低版本Node.js没有内置DOMParser，可以替换解码逻辑：给提取到的div内部文本做标签过滤后，用轻量的转义库做实体解码即可，核心匹配逻辑不需要改
• 正则默认不处理div嵌套场景，而符合规范的邮件pre-header内部只会放纯文本和简单转义字符，不会嵌套div，不会出现匹配错误
• 样式校验做了宽松匹配，只要div的inline style里存在display:none规则就会命中，不会因为style里写了其他属性（比如max-height、overflow）漏匹配

内容的提问来源于stack exchange，提问作者C. Ubkcah