如何用正则表达式识别两段换行分隔的首段落并以<div>包裹

核心思路 #

通过正则匹配<pre>内容里从开头到第一个连续两个换行符（\n\n）的部分，将这段内容包裹进带样式的<div>中实现高亮外框，同时保留后续内容的原有格式。

实现代码 #

var preElement = document.querySelector("pre");
var text = preElement.innerHTML;

// 匹配开头到第一个连续换行符的第一段，兼容无分段的情况
const highlightRegex = /^([\s\S]*?)(\n\n|$)/;
// 替换为带外框的div，保留原分隔符和后续内容
const highlightedText = text.replace(highlightRegex, '<div style="border: 1px solid #333; background: #f8f8f8; padding: 8px; border-radius: 4px;">$1</div>$2');

preElement.innerHTML = highlightedText;

正则说明 #

• ^：锁定文本开头位置
• ([\s\S]*?)：非贪婪匹配任意字符（包括换行，[\s\S]可覆盖所有文本类型），直到遇到后续的分隔符
• (\n\n|$)：匹配分段标记——要么是两个连续换行符，要么是文本结尾（处理只有一段内容的场景）
• 替换时用$1引用第一段内容，$2引用分隔符，确保后续内容的换行格式不受破坏

样式自定义 #

示例里的<div>用了基础外框样式，你可以根据需求修改border、background-color等属性，或者替换为自定义CSS类名（比如class="highlighted"）。

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