本文介绍如何使用 PHP 正则表达式安全、简洁地提取 HTML 中的标题标签（如 、），生成结构化的目录 列表，并为每个标题添加唯一 id 和对应链接，适用于静态文章目录生成场景。
本文介绍如何使用 php 正则表达式安全、简洁地提取 html 中的标题标签（如 `
`、``），生成结构化的目录 `` 列表，并为每个标题添加唯一 `id` 和对应链接，适用于静态文章目录生成场景。在构建文章目录（Table of Contents, TOC）功能时，一个常见需求是：从原始 HTML 内容中识别所有标题（
至 ），将其提取为带跳转锚点的无序列表。虽然使用 DOM 解析器（如 DOMDocument）是更健壮的推荐方案，但对于结构简单、可控的 HTML 片段，正则表达式可提供轻量、高效的实现。
以下是一个修正后的完整示例，解决了原代码中正则匹配不准确、标签闭合干扰、属性遗漏等问题：
$post = '
<h2>Title 01</h2>
<h3>Title 01.01</h3>
<h3>Title 01.02</h3>
<h2>Title 02</h2>
<h3>Title 02.02</h3>
';
$c = 1;
$listElements = preg_replace_callback(
'~<h>]*>(.*?)</h>\1>~i', // 精确匹配开闭一致的 h2–h6 标签，忽略属性，捕获层级与内容
function ($matches) use (&$c) {
$title = trim($matches[2]); // 去除可能的前后空白
$id = 'id' . $c++;
return "
- ` 列表，并为每个标题添加唯一 `id` 和对应链接，适用于静态文章目录生成场景。
在构建文章目录（Table of Contents, TOC）功能时，一个常见需求是：从原始 HTML 内容中识别所有标题（
至 ），将其提取为带跳转锚点的无序列表。虽然使用 DOM 解析器（如 DOMDocument）是更健壮的推荐方案，但对于结构简单、可控的 HTML 片段，正则表达式可提供轻量、高效的实现。
以下是一个修正后的完整示例，解决了原代码中正则匹配不准确、标签闭合干扰、属性遗漏等问题：
$post = '
<h2>Title 01</h2>
<h3>Title 01.01</h3>
<h3>Title 01.02</h3>
<h2>Title 02</h2>
<h3>Title 02.02</h3>
';
$c = 1;
$listElements = preg_replace_callback(
'~<h>]*>(.*?)</h>\1>~i', // 精确匹配开闭一致的 h2–h6 标签，忽略属性，捕获层级与内容
function ($matches) use (&$c) {
$title = trim($matches[2]); // 去除可能的前后空白
$id = 'id' . $c++;
return "
- ';
echo $listElements;
echo '
✅ 输出结果：
? 关键改进说明：
- 使用 ~
]*>(.*?) \1>~i 确保匹配成对的标题标签（如…
），避免跨标签误匹配； - [^>]* 容忍 class、id 等任意属性，提升兼容性；
- \1 是反向引用，保证闭合标签与开头层级一致（防止
… 类错误）；
- href="#idX" 符合 HTML 锚点规范（原问题中错误使用了 id="#idX"，应为 href 属性指向 id）；
- 实际应用中需同步为原文标题添加对应 id 属性（例如
Title 01
），否则链接无法跳转——此步骤可在生成目录后，用第二次正则或 DOM 操作补全。
⚠️ 注意事项：
- 正则表达式不适用于嵌套、不规范或含 JS/CSS 的复杂 HTML；生产环境建议改用 DOMDocument + XPath；
- 若标题含 HTML 实体（如 &）或特殊字符，应配合 html_entity_decode() 和 htmlspecialchars() 做转义处理；
- 为支持语义化和可访问性，可进一步为
- 添加 role="navigation" 及 aria-label="Table of contents"。
掌握这一技巧，可快速为博客、文档系统等注入基础 TOC 能力——简洁、有效，且易于集成到模板渲染流程中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
