标签添加自增序号
" />
本文详解如何正确解析含 `
` 换行的 html 歌词文本，并为每一行（即每个 `
` 前的内容）动态添加递增序号，指出原始代码中误用 `php_eol` 导致失效的根本原因，并提供健壮、可复用的解决方案。
原始代码的问题核心在于：它试图用 explode(PHP_EOL, $lyrics) 按操作系统换行符（如 \n 或 \r\n）分割字符串，但 $lyrics 是一个单行 HTML 字符串——所有 <br /> 标签均在同一行内，源文本中并不存在真正的换行符（\n）。因此 explode(PHP_EOL, ...) 仅返回一个包含完整 <p>...</p> 的元素数组，循环只执行一次，序号无法按 <br /> 行生效。
✅ 正确做法是：*以 <br />（或更严谨地，`<br\s/?>`）为分隔符进行分割**，并注意保留 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>";
// 使用正则安全分割，匹配 <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('/<br\s*\/?>/i', ...) 使用不区分大小写的正则，兼容 <br>、<br/>、<br />、<BR> 等形式；
- PREG_SPLIT_NO_EMPTY 避免因连续 <br> 产生空项；
- array_filter(..., 'strlen') 进一步剔除纯空白行，提升鲁棒性；
- 切勿直接在原始 HTML 中“原位替换” —— 若需保留 <p> 外层结构，建议先 strip_tags() 提取纯文本再处理，或改用 DOM 解析（适用于复杂嵌套场景）；
- 如需前端动态渲染（如响应式歌词），推荐将序号逻辑移至 JavaScript，配合 textContent.split(/<br\s*\/?>/gi) 实现。
? 进阶提示： 对于生产环境歌词展示，建议结合 CSS 计数器（counter-increment）实现纯样式序号，完全解耦逻辑与表现，更语义、更可维护。
通过以上修正，每行歌词前将精准显示 [1]、[2]……等递增编号，真正实现“按 <br /> 分行计数”的设计目标。
