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

标签添加自增行号 "> 标签添加自增行号 " />

本文详解如何正确地在 html 歌词文本中，为每个 `
` 换行标签动态插入递增的行号（如“1”“2”“3”…），指出原代码因错误使用 `php_eol` 导致失效，并提供健壮、可复用的解决方案。

原始代码的问题核心在于：它试图用 explode(PHP_EOL, $lyrics) 按操作系统换行符（如 \n 或 \r\n）分割字符串，但 $lyrics 是一个单行 HTML 字符串，其中的换行仅由
标签语义表示，源码中实际并无物理换行符。因此 explode() 返回的数组几乎只有一个元素，后续循环无法按预期逐行处理。

✅ 正确做法是：以
为分隔符进行分割，再对每一段内容追加序号，并重新拼接为带编号的 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 
";

// 步骤1：先提取 `
` 内容（去除包裹标签，避免编号出现在段落标签上）
$lyrics = preg_replace('/^
(.*?)<\/p>$/s', '$1', trim($lyrics));

// 步骤2：统一标准化 `
` 变体为小写 `
`，便于统一处理
$lyrics = preg_replace('//i', '
', $lyrics);

// 步骤3：以 `
` 分割（注意：需转义斜杠，且使用 PREG_SPLIT_NO_EMPTY 过滤空项）
$lines = preg_split('/
/', $lyrics, -1, PREG_SPLIT_NO_EMPTY);

// 步骤4：逐行编号并重建 HTML
$numberedLines = [];
foreach ($lines as $index => $line) {
    $lineNum = $index + 1;
    $numberedLines[] = trim($line) . ' [' . $lineNum . ']';
}

// 步骤5：用 `
` 重新连接，并包裹回 `
`
$result = '
' . implode('
', $numberedLines) . '
';

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]
...

此方案逻辑清晰、兼容性强，可直接集成至歌词管理系统或打印模板中。