如何用JavaScript正则表达式提取HTML style标签内文本

你的代码目前没法正确提取目标内容，主要有两个问题：一是用了g全局修饰符后，match()只会返回完整的匹配字符串，拿不到捕获组里的CSS内容；二是虽然正则的基础结构没问题，但需要调整匹配方式来精准获取文本。

下面分场景给出解决方案：

单个style标签的情况 #

如果你的HTML里只有一个style标签，可以用不带全局修饰符的正则，通过match()的返回值获取捕获组内容：

var rawHtml = "<style type='text/css'> div { color: red; } </style>";
// 兼容带双引号属性的情况：var rawHtml = "<style type=\"text/css\"> div { color: red; } </style>";
// 兼容无属性的情况：var rawHtml = "<style> div { color: red; } </style>";

// 正则解析：
// <style[^>]*> 匹配转义后的style起始标签，[^>]*会匹配标签内所有属性（不管单/双引号）
// (.+?) 非贪婪捕获标签内的所有文本，避免过度匹配
// <\/style> 匹配转义后的结束标签
// i修饰符支持匹配<STYLE>这类大小写混合的标签
const styleRegex = /<style[^>]*>(.+?)<\/style>/i;
const matchResult = rawHtml.match(styleRegex);

if (matchResult) {
  // 取第一个捕获组的内容，trim去掉前后冗余空格
  const cssContent = matchResult[1].trim();
  console.log(cssContent); // 输出：div { color: red; }
}

多个style标签的情况 #

如果有多个style标签，需要用g全局修饰符配合matchAll()来获取所有匹配的捕获组内容（ES2020及以上支持）：

var rawHtml = "<style type='text/css'> div { color: red; } </style><style>p { margin: 0; }</style>";
const styleRegex = /<style[^>]*>(.+?)<\/style>/gi;
// 用matchAll获取所有匹配结果
const allMatches = rawHtml.matchAll(styleRegex);
// 转换为数组并提取每个匹配的捕获组内容
const allCssContents = Array.from(allMatches).map(item => item[1].trim());

console.log(allCssContents); // 输出：["div { color: red; }", "p { margin: 0; }"]

关键细节说明 #

• [^>]*的作用：这个部分会匹配任意数量的非>字符，不管style标签里的属性是单引号、双引号还是没有属性，都能完整匹配起始标签，不会因为引号类型出问题。
• 非贪婪量词+?：如果用贪婪的+，当有多个style标签时，会从第一个起始标签匹配到最后一个结束标签，导致内容错误。+?会匹配到最近的结束标签，保证每个style标签的内容独立提取。

更健壮的替代方案 #

如果你的HTML结构复杂（比如style标签里有注释、转义嵌套等），正则可能会失效，这时可以把转义的HTML还原成真实HTML，用DOM方法提取：

var rawHtml = "<style type='text/css'> div { color: red; } </style>";
// 把转义的HTML解码为真实内容
const decodedHtml = decodeURIComponent(rawHtml);
// 用DOMParser解析HTML
const parser = new DOMParser();
const doc = parser.parseFromString(decodedHtml, 'text/html');
// 获取所有style元素并提取文本内容
const styleElements = doc.querySelectorAll('style');
const cssContents = Array.from(styleElements).map(el => el.textContent.trim());

console.log(cssContents);

这种方法完全不用考虑正则的边界情况，适配绝大多数复杂场景。

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