如何用JavaScript从HTML字符串中提取所有内联样式

要提取HTML邮件模板里所有内联style的属性名，用正则确实是高效的方案，这里给你一套可直接用的实现思路：

两步走的正则匹配逻辑 #

1. 先提取所有style属性的内容
   用正则匹配出所有style="..."或style='...'中的样式文本，避免跨属性匹配的问题：

   style=(["'])(.*?)\1
   

   • style= 精准匹配style属性的起始
   • (["']) 捕获单/双引号作为闭合标记
   • (.*?) 非贪婪匹配引号内的样式内容，防止把多个style属性的内容连在一起
   • \1 匹配开头捕获的引号，确保属性闭合

2. 从样式内容中提取属性名
   针对每个style的内容，匹配出所有CSS属性名：

   [a-z-]+\s*:
   

   • [a-z-]+ 匹配由小写字母和连字符组成的属性名（覆盖所有标准CSS属性命名）
   • \s*: 匹配属性名后可选的空格和冒号，兼容margin:0或margin : 0这类写法

完整代码示例（JavaScript） #

// 替换成你的HTML邮件模板字符串
const htmlTemplate = `<div style="min-width: 100px; max-width: 600px; margin: 0 auto;">
  <p style="padding: 10px; text-decoration: underline; word-break: break-all;">示例文本</p>
</div>`;

// 第一步：提取所有style属性的内容
const styleTextList = htmlTemplate.match(/style=(["'])(.*?)\1/g)?.map(item => {
  // 剥离style="..."外层的标记，只保留样式文本
  return item.replace(/^style=["']|["']$/g, '');
}) || [];

// 第二步：提取属性名并去重
const uniqueProps = new Set();
styleTextList.forEach(styleText => {
  const props = styleText.match(/[a-z-]+\s*:/g)?.map(prop => {
    // 去掉属性名后的空格和冒号，得到纯属性名
    return prop.trim().replace(/:$/, '');
  }) || [];
  props.forEach(p => uniqueProps.add(p));
});

// 转换为数组就是最终结果
const result = Array.from(uniqueProps);
console.log(result);

关键细节说明 #

• 用Set自动去重，确保最终数组里的属性名不会重复
• 正则兼容邮件模板里常见的书写不规范情况（比如属性名前后加空格）
• 若你的模板里有极特殊场景（比如样式值里包含冒号，内联样式中极少出现），可微调正则，但这套逻辑能覆盖99%的邮件模板需求

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