标签添加自增序号
" />
本文详解如何正确解析含 `
` 换行的 html 歌词文本，并为每一行（即每个 `
` 前的内容）动态添加递增序号，指出原始代码中误用 `php_eol` 导致失效的根本原因，并提供健壮、可复用的解决方案。
原始代码的问题核心在于：它试图用 explode(PHP_EOL, $lyrics) 按操作系统换行符（如 \n 或 \r\n）分割字符串，但 $lyrics 是一个单行 HTML 字符串——所有
标签均在同一行内，源文本中并不存在真正的换行符（\n）。因此 explode(PHP_EOL, ...) 仅返回一个包含完整
...
的元素数组，循环只执行一次，序号无法按行生效。
✅ 正确做法是：*以
（或更严谨地，`
/?>`）为分隔符进行分割**，并注意保留 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/2109" title="AiBiao.cn"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679984040171.png" alt="AiBiao.cn" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2109" title="AiBiao.cn">AiBiao.cn</a>
<p>一句话自动生成图表</p>
</div>
<a href="/ai/2109" title="AiBiao.cn" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>";
// 使用正则安全分割，匹配 <br>, <br/>, <br />, <BR />, 等常见变体
$lines = preg_split('/<br\s*\/?>/i', $lyrics, -1, PREG_SPLIT_NO_EMPTY);
// 清理首尾空白，并过滤空行（如结尾多余 <br> 导致的空项）
$lines = array_map('trim', $lines);
$lines = array_filter($lines, 'strlen');
// 输出带序号的每一行（注意：需手动补回 <br> 或使用 <div> 等语义化容器）
echo '<p>';
foreach ($lines as $index => $line) {
$number = $index + 1;
echo "<span class=\"line-number\">[{$number}]</span> {$line}<br />";
}
echo '</p>';
?>? 关键说明与注意事项：
- preg_split('/
/i', ...) 使用不区分大小写的正则，兼容
、
、
、
等形式； - PREG_SPLIT_NO_EMPTY 避免因连续
产生空项； - array_filter(..., 'strlen') 进一步剔除纯空白行，提升鲁棒性；
-
切勿直接在原始 HTML 中“原位替换” —— 若需保留
外层结构，建议先 strip_tags() 提取纯文本再处理，或改用 DOM 解析（适用于复杂嵌套场景）；
- 如需前端动态渲染（如响应式歌词），推荐将序号逻辑移至 JavaScript，配合 textContent.split(/
/gi) 实现。
? 进阶提示： 对于生产环境歌词展示，建议结合 CSS 计数器（counter-increment）实现纯样式序号，完全解耦逻辑与表现，更语义、更可维护。
通过以上修正，每行歌词前将精准显示 [1]、[2]……等递增编号，真正实现“按
分行计数”的设计目标。
