rgbを正規表現で

Question

javascriptにおいて、下記のようにjqueyで取得した要素の背景色(background-color)を正規表現でマッチさせたいのですが
どうやってもマッチできません。背景色は、rgb(x,x,x)のような形になっています。
このrgb(x,x,x)を正規表現でマッチさせるにはどうすればよいのでしょうか。
マッチさせるさい、RとGとBに相当する値はグループ化させたいと考えております。

var color = $(this).css('background-color');
var ex = /^rgb\((\d[1,3]),(\d[1,3]),(\d[1,3])\)/;
var result = color.match(ex);
for(var i = 0, len = result.length; i < len; i++) {
    console.log('マッチしたやつ',result[i]);
};

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13152484638

Answer 1

実際Chromeで見たところ、以下の2点が取れない原因でした。

• rgbではなく、rgbaで取れる事がある
• 数値とカンマだけではなく、スペースが入り込む事がある

var ex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/ // ["rgba(0, 0, 0", "0", "0", "0"]

2行目を上記のように書き換えると動きましたよ。

Comments

[think49]

> var ex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/
rgba() の引数は4つです(alpha値分、rgb() よりも多い)。rgba() の引数3つは文法違反ですね。
https://drafts.csswg.org/css-color-4/#rgb-functions
<percentage> のケースが考慮されていませんが、computedStyle の場合は <number> 固定で良さそうです。
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html#serializing-css-values

[miyabi-sun]

？？？
どのような意図でこのレスをするに至ったか理由がわからないので、
まずはそこをお聞きしたいです。

私は以下の理由で上の正規表現で十分と判断しました
・正規表現は文法をチェックする用途にも使えるが、別のロジックですべき
・「妥当な」rgbとrgbaがどちらも引数の3つまではR、G、Bの順番である
・そもそも他のケースをjQueryが返すか知らない
・jQueryがrgbやrgbaを返す場合、それなりに規則性のある文字列になるだろう
・イレギュラーパターンまで同じ正規表現で頑張り続けるのは労力の無駄遣いなのでif文で対処すべき

そもそも論「#xxx形式」や「#xxxxxx形式」で来たらどうするのでしょうね。
さっきの正規表現に盛り込むのでしょうか？

こういう話でなければ申し訳ありません。

[think49]

読み直してみたところ、正規表現上で括弧で閉じていなかった事に気が付きました…。失礼しました。

> そもそも論「#xxx形式」や「#xxxxxx形式」で来たらどうするのでしょうね。
jquery-2.1.4.js において jQuery#css() は getComputedStyle を得ます。
https://github.com/components/jquery/blob/master/jquery.js#L5553
https://github.com/components/jquery/blob/master/jquery.js#L5914
https://github.com/components/jquery/blob/master/jquery.js#L6010
getComputedStyle は解決値(resolved value)得ます。
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html#dom-Window-getComputedStyle
解決値は一部の例外を除き、算出値(computed value)と同義です。
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html#resolved-value
<color> の解決値/算出値は rgb(), rgba() と定められている為、jQuery#css(’background-color’) は "rgb()", "rgba()" しか返しません。
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html#serializing-css-values
rgb(), rgba() の Syntax は CSS Color Module Level 4 にありますが、小数/指数まで含めると大変なので CSS Color Module Level 3 準拠の整数値のみでも良いと思います。
http://www.hcn.zaq.ne.jp/___/WEB/css-color-ja.html#rgb-functions

---
function parseCssRGB (string) {
var rgb = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(string);
return rgb ? {red: rgb[1], green: rgb[2], blue: rgb[3]} : null;
}
function parseCssRGBA (string) {
var rgba = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(string);
return rgba ? {red: rgba[1], green: rgba[2], blue: rgba[3], alpha: rgba[4]} : null;
}