JavaScript 正则表达式从样式 HTML 标签中提取文本

Question

我正在尝试使用 JavaScript RegEx 来提取 CSS HTML 标记之间的所有文本：

 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>";
 var cssString = rawHtml.match(/<style[^>]*>(.+?)<\/style>/gi);
 console.log(cssString);

样式标签可以有属性以及单引号或双引号。如何成功提取所有用例？我的正则表达式没有捡起它。

Answer 1

我认为您的代码中的主要问题是您将 cssString 设置为完全匹配，而不是括号中匹配的部分。你需要这样的东西：

var innerHTML = cssString ? cssString[1] : ""; 

这里的重要部分是您的正则表达式中的括号匹配 - (.+?) - 存储在反向引用 1 中，即在 cssString[1] 中，而不是在 cssString 中。

不过，我还会做一些小改动，让您的正则表达式更加健壮：

/<style[^>]*>([^<]+)<\/style>/i

在这里，我们在括号中的反向引用中匹配“任何不是<”。由于样式标签内的代码可能超过一行，.* 或 .+ 不是匹配“所有内容”的好方法，因为在 JavaScript 中，点不匹配换行符。您可以改用否定字符类。要完全匹配任何内容，请使用[\s\S]*（任何内容没有或尽可能多次）或[\s\S]+（任何内容至少一次并尽可能多次）。但是，在这里您要确保匹配在下一个 < 处停止。我去掉了问号，因为如果正则表达式不能跳过下一个<，你不需要让搜索变得懒惰。

编辑：我刚刚意识到您正在使用全局标志，这会改变一些事情。上面的答案假设一个匹配，没有 /g 标志。稍后将添加一些有关全局匹配的信息。

因此，要使用您的正则表达式遍历可能有多个文档中的所有 <style> 元素，您需要执行以下操作：

var styleMatchRegExp = /<style[^>]*>([^<]+)<\/style>/ig;
var match = styleMatchRegExp.exec(rawHtml);
var cssStringArray = [];
while (match != null) {
    cssStringArray.push(match[1]);
    match = styleMatchRegExp.exec(rawHtml);
}

您最终会得到一个数组 (cssStringArray)，其中包含文档中每个 <style>...</style> 组中的 css。

Answer 2

只需使用 DOMParser：

const rawHTML = "<style type='text/css'> div { color: red; } </style>";
const doc = new DOMParser().parseFromString(rawHTML, "text/html");
const matches = [...doc.querySelectorAll('style')]
  .map(style => style.textContent);
console.log(matches);