本文介绍如何使用正则表达式精准匹配含内联 color 样式的 嵌套结构，并将其提取至字符串开头，适用于富文本编辑场景中按样式优先级重排内容。
本文介绍如何使用正则表达式精准匹配含内联 color 样式的 `
` 嵌套结构，并将其提取至字符串开头，适用于富文本编辑场景中按样式优先级重排内容。
在实际前端开发中，常需对用户输入的 HTML 片段进行语义化重组——例如将所有“带颜色文字”的段落统一置顶，以突出强调内容。本例目标是将形如 <p><span style="color: #3598db;">...</span></p> 的彩色段落提取到整个 HTML 字符串最前方，其余无色段落（如 <p>test black text</p>）后置。
关键在于可靠识别带 color 样式的嵌套结构，而非简单硬编码颜色值（如 #3598db）。以下正则表达式兼顾健壮性与兼容性：
const colorParagraphRegex = /<p\s*>\s*<span\s+[^>]*style\s*=\s*["'](?:[^"']*\bcolor\s*:\s*[^;"']*)[^"']*["'][^>]*>[\s\S]*?<\/span\s*>\s*<\/p\s*>/gi;
该正则特点：
立即学习“Java免费学习笔记（深入）”；
- 支持
style="color: #3598db"、style='color:rgb(53,152,219)'、style="background:#fff; color: blue;"等多种写法； - 容忍标签内空白、属性顺序差异及多余空格；
- 使用
[\s\S]*?非贪婪匹配 span 内容，避免跨标签误捕； - 全局（
g）与不区分大小写（i）标志确保多段匹配。
完整实现如下：
function moveColoredParagraphsToFront(html) {
const colorRegex = /<p\s*>\s*<span\s+[^>]*style\s*=\s*["'](?:[^"']*\bcolor\s*:\s*[^;"']*)[^"']*["'][^>]*>[\s\S]*?<\/span\s*>\s*<\/p\s*>/gi;
// 提取所有带 color 的段落
const coloredMatches = [...html.matchAll(colorRegex)].map(m => m[0]);
// 移除原字符串中所有匹配项（保留其余 HTML）
let cleaned = html.replace(colorRegex, '');
// 将彩色段落拼接到开头，去除首尾多余空白
return coloredMatches.join('').trim() + cleaned.trim();
}
// 示例使用
let input = '<p>test black text</p><p><span style="color: #3598db;">test blue text</span></p>';
console.log(moveColoredParagraphsToFront(input));
// 输出："<p><span style="color: #3598db;">test blue text</span></p><p>test black text</p>"⚠️ 注意事项：
- 此方案基于字符串操作，不依赖 DOM 解析，适合纯文本环境（如
<textarea></textarea>内容处理），但无法校验 HTML 合法性； - 若 HTML 结构复杂（如嵌套 span、多重样式），建议改用
DOMParser进行安全解析与重排； - 正则无法完美处理注释、CDATA 或畸形标签，生产环境应配合 HTML sanitizer（如 DOMPurify）预处理；
- 多次匹配时注意
exec()的全局 lastIndex 问题——本实现采用matchAll()更安全可靠。
总结：通过精心设计的正则表达式，可高效完成带样式的 HTML 片段提取与重组。该方法轻量、零依赖，特别适合表单提交前的即时内容归类，是字符串操作在富文本处理中的典型实践。
