如何用正则表达式批量替换HTML中的style属性格式？

原正则的问题 #

你的正则 style="(.*): (.*); 存在两个核心问题：

• 贪婪匹配的 (.*) 会一次性抓取所有样式内容，无法逐个拆分属性值对；
• 仅能匹配单个属性，无法批量处理多个样式条目。

正确替换方案 #

场景1：编辑器批量替换（VS Code/Sublime等）

分两步完成全局替换：

1. 替换style的引号为大括号

   • 查找正则：style="([^&]+)"
   • 替换内容：style={{$1}}
     作用：将 style="样式内容" 转换为 style={{样式内容}}。

2. 格式化大括号内的属性值对

   • 查找正则：([\w-]+):\s*([^;]+);
   • 替换内容：'$1': '$2';
     作用：将每个 属性: 值; 转换为 '属性': '值'; 的格式。

场景2：代码层面一步到位（JavaScript）

如果在代码中处理整页HTML，可通过带回调的正则实现一次性替换：

// 示例：传入整页HTML内容
const pageHtml = `<p><code>style=&quot;width: 100%; max-width: 800px; margin: 0 auto;letter-spacing: 1px;&quot;</code></p>`;

// 执行全局替换
const transformedHtml = pageHtml.replace(/style=&quot;([^&]+)&quot;/g, (_, styleContent) => {
  // 逐个转换属性值对
  const formattedStyles = styleContent.replace(/([\w-]+):\s*([^;]+);/g, "'$1': '$2';");
  return `style={{${formattedStyles}}}`;
});

替换效果验证 #

原字符串：

<p><code>style=&quot;width: 100%; max-width: 800px; margin: 0 auto;letter-spacing: 1px;&quot;</code></p>

替换后结果：

<p><code>style={{'width': '100%'; 'max-width': '800px'; 'margin': '0 auto';'letter-spacing': '1px';}}</code></p>

（注：你给出的目标格式末尾保留了 "，应为输入笔误，上述方案会生成标准的JSX style对象格式）

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