Regex实现HTML标签包裹格式化：如何为每个主项添加容器？

嘿，我明白你现在的困境——已经搞定了部分HTML格式化，但卡在给每个人员信息套容器上对吧？其实正则查找替换完全能搞定这个场景，毕竟你的数据结构非常规律：每段人员信息都以Name:开头，直到下一个Name:（或文本结尾）结束。

核心思路 #

利用正则的正向预查和非贪婪匹配，精准分割每个人员的完整信息块，再将其包裹在目标容器标签中。

具体操作步骤 #

1. 正则匹配规则（适用于编辑器或代码） #

查找正则（带全局/跨行模式）

(Name:.*?)(?=Name:|$)

• Name:.*?：非贪婪匹配从Name:开始的所有内容，避免一次性匹配多个人员
• (?=Name:|$)：正向预查，确保匹配的内容后面要么是下一个Name:，要么是文本结尾，精准切割每个人员块

替换内容

<div class="person-container">$1</div>

• $1对应正则捕获到的单个人员信息块，直接包裹在自定义类名的div容器中

2. 编辑器端操作（以VS Code为例） #

• 按Ctrl+H打开替换面板
• 点击面板右侧的.*图标开启正则匹配模式
• 粘贴上面的查找正则和替换内容，点击「全部替换」即可完成批量处理

3. 代码端处理（以JavaScript为例） #

如果是在代码中动态处理文本，可以用以下代码：

const rawText = `Name: Person1 Address: Add1. Office hours: 8:30 AM - 6:00 PM Mon - Sat <br> 9:30 AM - 3:00 PM Sun Name: Person2 Address: Add2 Office hours: Not Available Name: Person3 Address: Add3 Office hours: 8:30 AM - 6:00 PM M...`;
const formattedHtml = rawText.replace(/(Name:.*?)(?=Name:|$)/gs, '<div class="person-container">$1</div>');
console.log(formattedHtml);

• gs标志：g表示全局匹配，s表示跨行匹配（处理<br>换行的情况）

进阶优化：给字段添加语义化标签 #

如果想进一步把每个字段（Name/Address/Office hours）也拆分成语义化标签，可以再补充以下正则替换：

• 替换Name字段：
  查找：Name: (.*?)(?= Address:| Office hours:|$)
  替换：<p class="person-name"><strong>Name:</strong> $1</p>
• 替换Address字段：
  查找：Address: (.*?)(?= Office hours:|$)
  替换：<p class="person-address"><strong>Address:</strong> $1</p>
• 替换Office hours字段：
  查找：Office hours: (.*?)(?=Name:|$)
  替换：<p class="person-hours"><strong>Office hours:</strong> $1</p>

这样处理后，最终的HTML会更易读、更利于样式控制。

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