如何使用JavaScript提取指定div标签之间的文本内容

安全阿岳

2026-10-7

JavaScript提取preheader文本的实现方案

方案1：正则匹配（适用固定结构场景）

因为已明确开闭div标签结构完全固定，直接用正则匹配实现最简单高效：

function extractPreheader(htmlStr) {
  // 定义固定的开闭标签
  const openTag = '<div class="preheader" style="font-size: 1px; display: none !important;">';
  const closeTag = '</div>';
  // 转义标签中的正则特殊字符，避免匹配异常
  const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 构建正则：s修饰符支持匹配换行，非贪婪匹配.*?保证只取第一个闭合标签前的内容
  const matchReg = new RegExp(`${escapeRegExp(openTag)}(.*?)${escapeRegExp(closeTag)}`, 's');
  const result = htmlStr.match(matchReg);
  return result ? result[1].trim() : '';
}

// 测试示例
const testHtml = `some html preceding...
<div class="preheader" style="font-size: 1px; display: none !important;">Email preheader content</div>
some html following...`;
console.log(extractPreheader(testHtml)); // 输出：Email preheader content

方案2：DOM解析（更稳定，兼容性更强）

如果担心preheader内容中包含</div>等特殊字符导致正则匹配出错，可以用DOM解析的方式提取，逻辑更可靠：

function extractPreheader(htmlStr) {
  // 创建临时DOM容器
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlStr;
  // 精准匹配对应属性的preheader元素
  const preheaderEl = tempContainer.querySelector('div.preheader[style="font-size: 1px; display: none !important;"]');
  return preheaderEl ? preheaderEl.textContent.trim() : '';
}

// 测试示例和输出结果同方案1

如果是Node.js环境没有原生DOM API，可以引入jsdom库实现相同逻辑。