本文详解如何修改 PHP 正则替换逻辑，将原本插入在 标签开头的 SVG 锚点图标，精准移至标题文本之后、闭合标签 之前，避免破坏 HTML 结构并确保语义正确。
本文详解如何修改 php 正则替换逻辑，将原本插入在 `
` 标签开头的 svg 锚点图标，精准移至标题文本之后、闭合标签 `
` 之前，避免破坏 html 结构并确保语义正确。在 WordPress 或自定义内容过滤器中，为标题自动添加可点击锚点图标（如链接符号 ?）是提升用户体验的常见需求。原始代码通过正则匹配 <h1></h1>–<h6></h6> 标签，并在开标签后立即插入图标（即 <h2>图标文本</h2>），但实际需求往往是将图标置于标题文字末尾、闭合标签之前（即 <h2>文本图标</h2>），以保持视觉连贯性与可访问性。
关键问题在于：preg_match_all 的 PREG_OFFSET_CAPTURE 返回的是匹配到的标题文本（$headlines[2]）在原文中的起始位置，而非开标签或闭标签的位置。原始代码使用 $offset + $pos 插入图标，本质是插在 <hx></hx> 和标题文本之间；而目标位置应是 <hx>文本</hx> 的末尾，即 $pos + strlen($headline) + 开标签长度。
✅ 正确做法是：
- 计算当前匹配标题的完整开标签长度（如
<h2></h2>为 4 字符，<h6></h6>为 4 字符，统一按<h1></h1>估算为 4）； - 标题文本起始位置
$pos+ 开标签长度（4）+ 标题文本长度 → 即为前的插入点； - 使用
substr_replace($text, $icon, $insertPos, 0)在该位置零长度插入图标。
以下是优化后的健壮实现（支持所有 H1–H6，且无需硬编码标签长度）：
public static function add_anchors($text)
{
// 匹配完整标题标签：<h1 class="title">Text</h1>
$pattern = '#<h([1-6])(?:\s[^>]*)?>(.+?)</h\1>#is';
preg_match_all($pattern, $text, $matches, PREG_OFFSET_CAPTURE | PREG_SET_ORDER);
// 从后往前替换，避免因前面插入导致后续 offset 偏移
$replacements = [];
foreach ($matches as $match) {
$fullMatch = $match[0][0]; // 完整匹配字符串，如 "<h2>My Title</h2>"
$fullStart = $match[0][1]; // 完整匹配在 $text 中的起始偏移
$headline = $match[2][0]; // 标题文本，如 "My Title"
$headlinePos = $match[2][1]; // 标题文本在 $text 中的起始偏移
if (empty($headline)) continue;
// ✅ 精确计算插入点：开标签结束位置 = 标题文本起始位置 - 开标签长度
// 开标签长度 = $headlinePos - $fullStart
$openTagLength = $headlinePos - $fullStart;
$insertPos = $fullStart + strlen($fullMatch) - strlen($match[1][0]) - 2; // 减去 "</hX>" 长度（如 "</h2>"=5）
// 更稳妥方式：直接定位到 `</hX>` 前 —— 利用完整匹配长度减去闭标签长度
$closeTag = '</h' . $match[1][0] . '>';
$insertPos = $fullStart + strlen($fullMatch) - strlen($closeTag);
$anchor = sanitize_title($headline);
$icon = '<a href="#' . esc_attr($anchor) . '" aria-hidden="true" class="aal_anchor" id="' . esc_attr($anchor) . '"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>';
$replacements[] = [
'pos' => $insertPos,
'icon' => $icon
];
}
// 逆序应用替换，防止 offset 失效
krsort($replacements);
foreach ($replacements as $r) {
$text = substr_replace($text, $r['icon'], $r['pos'], 0);
}
return $text;
}? 重要注意事项：
-
永远优先使用
krsort()逆序替换：因每次substr_replace会改变字符串长度，从前向后替换会导致后续pos偏移失效；逆序可保证所有位置仍有效。 -
务必转义
anchor值：使用esc_attr()防止 XSS，sanitize_title()已处理 URL 友好性，但输出到 HTML 属性仍需双重防护。 -
避免依赖固定标签长度：
<h1></h1>和<h6></h6>开标签长度相同（均为 4），但若存在空格或属性（如<h2 class="title"></h2>），长度会变化——因此必须基于正则捕获的完整匹配动态计算。 -
语义化与无障碍：
aria-hidden="true"保证图标不被屏幕阅读器朗读，而链接本身已具备href，符合 WCAG 2.1 标准。
此方案彻底解决“图标位置错位”问题，兼顾兼容性、安全性与可维护性，适用于任何基于 PHP 的富文本后处理场景。
