标签前自动添加递增序号
" />
本文介绍使用 php 对纯文本歌词按换行符分割并动态插入行号，实现在每行末尾（`
` 前）显示递增数字的完整解决方案，适用于无结构化换行文本的编号需求。
在 Web 开发中，若需为一段以
分隔的歌词（或其他纯文本内容）自动添加行号（如“第1行”“第2行”…），不能依赖 CSS —— 因为
是自闭合空元素，不支持 ::before/::after 伪元素，也无法设置计数器（counter-increment）作用域。此时必须借助服务端逻辑进行预处理。
最简洁可靠的方案是：将原始歌词字符串按换行符切分为数组，遍历并拼接行号后重新输出带
的 HTML 行。
✅ 推荐实现（PHP）
<?php
$lyrics = "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";
// 使用 PHP_EOL 确保跨平台兼容（Windows \r\n / Unix \n / Mac \r）
$lines = explode(PHP_EOL, $lyrics);
foreach ($lines as $index => $line) {
// $index 从 0 开始 → 行号需 +1；注意空格与 <br /> 位置
echo htmlspecialchars(trim($line)) . ' ' . ($index + 1) . '<br>' . "\n";
}
?>? 输出效果（HTML 渲染后）：Every time when I look in the mirror 1 All these lines on my face getting clearer 2 The past is gone 3 ...
⚠️ 关键注意事项
- 安全过滤：务必使用 htmlspecialchars() 转义原始文本，防止 XSS（尤其当歌词来自用户输入或数据库时）；
- 空白处理：trim($line) 可避免因前后空格导致行号前出现多余空格；
- 换行符一致性：PHP_EOL 比硬编码 "\n" 更健壮；若数据来自表单
- 性能友好：该方案时间复杂度 O(n)，适用于千行以内歌词，无需正则或 DOM 解析，轻量高效；
- 不可用于已含 HTML 的内容：若 $lyrics 中已混有 、 等标签，请先用 strip_tags() 或 DOMDocument 清洗，否则 explode() 可能误切标签内部换行。
✅ 进阶建议（可选）
如需支持「点击跳转到某行」或「CSS 样式定制行号」，可改为包裹结构：
echo '<span class="line-number">' . ($index + 1) . '</span> '
. htmlspecialchars(trim($line)) . '<br>' . "\n";再配合 CSS 控制 .line-number { display: inline-block; width: 2em; text-align: right; margin-right: 0.5em; color: #666; }，提升可维护性与样式灵活性。
总之，用 explode() + foreach 是解决
行号问题最直接、可控且符合 Web 实践的方式——无需 JavaScript，不依赖前端渲染时机，服务端一次生成即完成。
