标签添加自增行号
" />
本文详解如何正确地在 html 歌词文本中，为每个 `
` 换行标签动态插入递增的行号（如“1”“2”“3”…），指出原代码因错误使用 `php_eol` 导致失效，并提供健壮、可复用的解决方案。
原始代码的问题核心在于：它试图用 explode(PHP_EOL, $lyrics) 按操作系统换行符（如 \n 或 \r\n）分割字符串，但 $lyrics 是一个单行 HTML 字符串，其中的换行仅由
标签语义表示，源码中实际并无物理换行符。因此 explode() 返回的数组几乎只有一个元素，后续循环无法按预期逐行处理。
✅ 正确做法是：以
为分隔符进行分割，再对每一段内容追加序号，并重新拼接为带编号的 HTML 行。
以下是优化后的完整实现（兼容
、
、
及大小写变体）：
<?php
$lyrics = "<p>Every time when I look in the mirror <br />All these lines on my face getting clearer <br /> The past is gone <br /> And it went by, like dusk to dawn <br /> Isn't that the way? <br /> Everybody's got their dues in life to pay <br /> Yeah, I know nobody knows <br /> Where it comes and where it goes <br /> I know it's everybody's sin <br /> You got to lose to know how to win <br /></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1450" title="Krea AI"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b6cd05bdec8426.png" alt="Krea AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1450" title="Krea AI">Krea AI</a>
<p>多功能的一站式AI图像生成和编辑平台</p>
</div>
<a href="/ai/1450" title="Krea AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>";
// 步骤1：先提取 `<p>` 内容（去除包裹标签，避免编号出现在段落标签上）
$lyrics = preg_replace('/^<p>(.*?)<\/p>$/s', '$1', trim($lyrics));
// 步骤2：统一标准化 `<br>` 变体为小写 `<br />`，便于统一处理
$lyrics = preg_replace('/<br\s*\/?>/i', '<br />', $lyrics);
// 步骤3：以 `<br />` 分割（注意：需转义斜杠，且使用 PREG_SPLIT_NO_EMPTY 过滤空项）
$lines = preg_split('/<br \/>/', $lyrics, -1, PREG_SPLIT_NO_EMPTY);
// 步骤4：逐行编号并重建 HTML
$numberedLines = [];
foreach ($lines as $index => $line) {
$lineNum = $index + 1;
$numberedLines[] = trim($line) . ' <span class="line-number">[' . $lineNum . ']</span>';
}
// 步骤5：用 `<br />` 重新连接，并包裹回 `<p>`
$result = '<p>' . implode('<br />', $numberedLines) . '</p>';
echo $result;
?>? 关键注意事项：
- ❌ 避免使用 explode(PHP_EOL, $lyrics) 处理 HTML 字符串——HTML 换行不依赖系统换行符；
- ✅ 优先用正则 preg_split() 处理
变体（更健壮），而非简单 str_replace() 后 explode()； - ⚠️ 若歌词含嵌套 HTML（如 、），上述方案仍安全，因只操作
边界； - ? 如需前端动态编号（如响应式编辑），建议改用 CSS counter-increment 或 JavaScript，PHP 方案适用于服务端静态渲染。
最终输出效果示例（片段）：
Every time when I look in the mirror [1]
All these lines on my face getting clearer [2]
...
此方案逻辑清晰、兼容性强，可直接集成至歌词管理系统或打印模板中。
