如何为歌词中的每行 标签添加自增序号

标签添加自增序号 " />

本文详解如何正确解析含 `
` 换行的 html 歌词文本，并为每一行（即每个 `
` 前的内容）动态添加递增序号，指出原始代码中误用 `php_eol` 导致失效的根本原因，并提供健壮、可复用的解决方案。

原始代码的问题核心在于：它试图用 explode(PHP_EOL, $lyrics) 按操作系统换行符（如 \n 或 \r\n）分割字符串，但 $lyrics 是一个单行 HTML 字符串——所有
标签均在同一行内，源文本中并不存在真正的换行符（\n）。因此 explode(PHP_EOL, ...) 仅返回一个包含完整

...

✅ 正确做法是：*以
（或更严谨地，`
/?>`）为分隔符进行分割**，并注意保留 HTML 结构完整性。

以下是优化后的完整实现（支持大小写、空格及自闭合变体）：

Every time when I look in the mirror 
All these lines on my face getting clearer 
 The past is gone 
 And it went by, like dusk to dawn 
 Isn't that the way? 
 Everybody's got their dues in life to pay 
 Yeah, I know nobody knows 
 Where it comes and where it goes 
 I know it's everybody's sin 
 You got to lose to know how to win 

							

								
								

									豆包大模型
									
字节跳动自主研发的一系列大型语言模型
								
								下载 
							
						
";

// 使用正则安全分割，匹配 
, 
, 
, 
, 等常见变体
$lines = preg_split('//i', $lyrics, -1, PREG_SPLIT_NO_EMPTY);

// 清理首尾空白，并过滤空行（如结尾多余 
 导致的空项）
$lines = array_map('trim', $lines);
$lines = array_filter($lines, 'strlen');

// 输出带序号的每一行（注意：需手动补回 
 或使用 
 等语义化容器）
echo '
';
foreach ($lines as $index => $line) {
    $number = $index + 1;
    echo "[{$number}] {$line}
";
}
echo '
';
?>

? 关键说明与注意事项：

• preg_split('/
  /i', ...) 使用不区分大小写的正则，兼容
  、
  、
  、
  等形式；
• PREG_SPLIT_NO_EMPTY 避免因连续
  产生空项；
• array_filter(..., 'strlen') 进一步剔除纯空白行，提升鲁棒性；
• 切勿直接在原始 HTML 中“原位替换” —— 若需保留

  外层结构，建议先 strip_tags() 提取纯文本再处理，或改用 DOM 解析（适用于复杂嵌套场景）；

• 如需前端动态渲染（如响应式歌词），推荐将序号逻辑移至 JavaScript，配合 textContent.split(/
  /gi) 实现。

? 进阶提示： 对于生产环境歌词展示，建议结合 CSS 计数器（counter-increment）实现纯样式序号，完全解耦逻辑与表现，更语义、更可维护。

通过以上修正，每行歌词前将精准显示 [1]、[2]……等递增编号，真正实现“按
分行计数”的设计目标。