如何将字符串中第2次出现的斜杠替换为<br>标签？

可以通过多种方式实现将日期字符串中的第二个斜杠替换为<br>标签的需求，以下是几种实用方法：

1. JavaScript 动态替换（适合前端动态内容） #

利用正则表达式精准匹配并替换第二个斜杠：

// 获取目标元素
const dateElement = document.querySelector('.post-date');
// 替换第二个斜杠为<br>
dateElement.innerHTML = dateElement.textContent.replace(/^(\d{2}\/\d{2})\/(\d{4})$/, '$1<br>$2');

这段代码会把15/03/2024转换成15/03<br>2024，实现年份换行显示。

2. CSS 视觉换行（无需修改内容结构） #

如果不想改动HTML或JavaScript代码，可通过CSS伪元素实现视觉上的换行效果：

.post-date {
  display: inline-block;
  line-height: 1.5;
}
.post-date::after {
  content: attr(data-year);
  display: block;
}

对应的HTML需要调整为：

<span class="post-date" data-year="2024">15/03</span>

这种方式通过将年份存入自定义属性，用伪元素单独显示在新行，达到和<br>一样的视觉效果。

3. 后端模板/字符串替换（适合静态页面渲染） #

如果是在后端生成页面（如PHP、Python、Java等），可以直接在输出前完成字符串替换：
以PHP为例：

$originalDate = '15/03/2024';
$formattedDate = preg_replace('/^(\d{2}\/\d{2})\/(\d{4})$/', '$1<br>$2', $originalDate);
echo "<span class='post-date'>{$formattedDate}</span>";

内容的提问来源于stack exchange，提问作者Makis11