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

只需使用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);

Answer 2

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

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

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

但是，我也做了一些小改动，让你的正则表达式更强大：

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

我们在这里匹配＆＃34;任何非<＆＃34;在括号中的反向引用。由于样式标记内的代码可能会超过一行，.*或.+不是匹配＆＃34;所有内容的好方法，因为在JavaScript中，点不会＆＃ 39;匹配换行符。您可以使用否定的字符类。要绝对匹配任何内容，请使用[\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。

JavaScript Regex从样式HTML标签中提取文本

2 个答案: