javascript - CSS3 変換文字列の正規表現 (Regex)

Question

"translateX(-50%) scale(1.2)"N 個の変換関数を持つ文字列が与えられた場合

1) どうすれば名前を一致させることができます["translateX", "scale"]か?

2) どうすれば値を一致させることができます["-50%", "1.2"]か?

Answer 1

これを行うために絶対に正規表現を使用する必要がある場合は、exec()メソッドをループで使用して、キャプチャされたグループの一致結果を選択した目的の配列にプッシュできます。

var str = 'translateX(-50%) scale(1.2)'
var re  = /(\w+)\(([^)]*)\)/g, 
names = [], vals = [];

while (m = re.exec(str)) {
  names.push(m[1]), vals.push(m[2]);
}

console.log(names) //=> [ 'translateX', 'scale' ] 
console.log(vals)  //=> [ '-50%', '1.2' ]

正規表現は 2 つのキャプチャ グループを使用します。1 つ目は単語の文字のみに一致/キャプチャし、2 つ目は)「0 回以上」以外の任意の文字に一致する否定を使用します。

Answer 2

次のようなものを試してください(\w+)\((.+?)\)：

• (\w+): 以下の正規表現に一致し、その一致を後方参照番号 1 にキャプチャします。
  • \w+: 「単語文字」(文字、数字、およびアンダースコア) である単一の文字に一致します。
    • +: 1回から無制限の間で、何度でも、必要に応じて恩返しをする (貪欲)
• \(: 文字「(」をそのまま一致させます
• (.+?): 以下の正規表現に一致し、その一致を後方参照番号 2 にキャプチャします。
  • .+?: 改行文字以外の任意の 1 文字に一致
    • +?: 1 回から無制限の回数の間で、できるだけ少ない回数で、必要に応じて拡張します (lazy)
• \): 文字「)」に文字通り一致

var str = "translateX(-50%) scale(1.2)",
    regex = /(\w+)\((.+?)\)/g,
    match, names = [], values = [];
while(match = regex.exec(str)) {
    names.push(match[1]);
    values.push(match[2]);
}