javascript - 用正则表达式分割字符串 - 正则表达式太贪婪

Question

我正在尝试拆分并提取可能包含多次出现的字符串中的格式为线性梯度(...)的所有字符串，例如线性梯度(...)，线性梯度(...)

我的正则表达式对于单次出现效果很好，但我无法让它在第一次出现后不贪婪。任何帮助将不胜感激。

一个regex101 version

适用于单次出现的正则表达式

/.*gradient\s*\(((?:\([^\)]*\)|[^\)\(]*)*)\)/g

要分割的字符串

linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 100%), linear-gradient(to bottom, rgb(177, 186, 206) 0%, rgb(92, 158, 79) 50%, rgb(135, 218, 232) 100%)

JavaScript

var aGradient = [];
var gradientString = "linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 100%), linear-gradient(to bottom, rgb(177, 186, 206) 0%, rgb(92, 158, 79) 50%, rgb(135, 218, 232) 100%)";
var regex = /.*gradient\s*\(((?:\([^\)]*\)|[^\)\(]*)*)\)/g;
var match;
while (match = regex.exec(gradientString)) {
  aGradient.push(match[0]);
  console.log(match[0]);
}

Answer 1

模式开头的 .* 部分尽可能匹配除换行符之外的任何 0+ 个字符。这意味着，您只能获得一行中的最后一个匹配项。

看来您只需要匹配 -gradient 前面出现的任何单词即可。将 .* 替换为 \w+-:

\w+-gradient\s*\(((?:\([^()]*\)|[^()]*)*)\)
^^^^

请参阅regex demo 。 \w+ 匹配 1 个或多个字母/数字/_。

如果您知道可能存在的值，请使用交替组:

(?:linear|radial)-gradient\s*\(((?:\([^()]*\)|[^()]*)*)\)
^^^^^^^^^^^^^^^^^

(?:线性|径向) 组将匹配 线性 或 径向。

注意:您不需要在字符类内转义 ( 和 )。