質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

rgbを正規表現で

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,323

score 481

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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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行目を上記のように書き換えると動きましたよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/13 06:12

    > 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

    キャンセル

  • 2015/11/13 08:29

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

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

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

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

    キャンセル

  • 2015/11/14 21:51 編集

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

    > そもそも論「#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;
    }

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る