javascript - RGB と RGBA の両方に一致する正規表現 JavaScript

Question

現在、RGB文字列に一致するこの正規表現があります。RGBまたはRGBAのいずれかに一致するのに十分なほど堅牢になるように強化する必要があります.

rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/; //matches RGB

http://jsfiddle.net/YxU2m/

var rgbString =  "rgb(0, 70, 255)";
var RGBAString = "rgba(0, 70, 255, 0.5)";

var rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
//need help on this regex
//I figure it needs to be ^rgba?, and then also an optional clause to handle the opacity

var partsRGB = rgbString.match(rgbRegex);
var partsRGBA = RGBAString.match(rgbRegex);

console.log(partsRGB); //["rgb(0, 70, 255)", "0", "70", "255"]
console.log(partsRGBA); //null. I want ["rgb(0, 70, 255, 0.5)", "0", "70", "255", "0.5"] 

Answer 1

それほど単純ではありません.RGBは4​​番目のパラメーターでは違法です。また、rgb 数値の整数値だけでなく、パーセンテージ小数も許可する必要があります。また、スペースはほとんどどこでも使用できます。

function getRgbish(c){
    var i= 0, itm,
    M= c.replace(/ +/g, '').match(/(rgba?)|(\d+(\.\d+)?%?)|(\.\d+)/g);
    if(M && M.length> 3){
        while(i<3){
            itm= M[++i];
            if(itm.indexOf('%')!= -1){
                itm= Math.round(parseFloat(itm)*2.55);
            }
            else itm= parseInt(itm);
            if(itm<0 || itm> 255) return NaN;
            M[i]= itm;
        }
        if(c.indexOf('rgba')=== 0){
            if(M[4]==undefined ||M[4]<0 || M[4]> 1) return NaN;
        }
        else if(M[4]) return NaN;
        return M[0]+'('+M.slice(1).join(',')+')';
    }
    return NaN;
}

//テスト:

var A= ['rgb(100,100,255)',
'rgb(100,100,255,.75)',
'rgba(100,100,255,.75)',
'rgb(100%,100%)',
'rgb(50%,100%,0)',
'rgba(100%,100%,0)',
'rgba(110%,110%,0,1)'];

A.map(getRgbish).join('\n');

returned values:
rgb(100,100,255)
NaN
rgba(100,100,255,.75)
NaN
rgb(127,255,0)
NaN
NaN

Answer 2

これでうまくいきますか？

var rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/

Answer 3

RGBA 値に対して次のスクリプトを試してください。結果はオブジェクトです。

       var getRGBA = function (string) {
          var match = string.match(/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/);
          return match ? {
            r: Number(match[1]),
            g: Number(match[2]),
            b: Number(match[3]),
            a: Number(match[4])
          } : {}
        };
                           
        var rgba = getRGBA('rgba(255, 255, 255, 0.49)');
        console.log(rgba);

Answer 4

rgb() と rgba() の値をチェックする正規表現を作成しました。0 ～ 255 の 3 つのタプルと、透過性のために 0 ～ 1 の間のオプションの 10 進数をチェックします。TLDR;

rgba?\(((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01]\.?\d*?)?\)

私たちが持っているさまざまな部分に分けて：

rgba?\( // Match rgb( or rgba( as the a is optional

0 ～ 255 は次の代替と一致します。

\d\d? // Match 0-99

1\d\d // Match 100 - 199

2[0-4]\d // Match 200-249

25[0-5] // Match 250 - 255

0 ～ 255 のタプルの前後のコンマとスペースの処理には、ある程度のスペースが必要です。必須の末尾のコンマとオプションのスペースを 2 回使用して、0 ～ 255 のタプルを照合します

(25[0-5]|2[0-4]\d|1([0-9]){1,2}|\d\d?)\s*,\s*){2}

次に、オプションのコンマとスペースを含む 0 ～ 255 のタプル - 末尾のコンマなしで rgb() 値を許可する

(25[0-5]|2[0-4]\d|1([0-9]){1,2}|\d\d?),?\s*

次に、整数または 10 進数としてオプションの 0-1 が続きます。

([01]\.?\d*?)? // 0 or 1 needed, dot and decimal numbers optional

そして、閉じ括弧で終わります

\)

Answer 5

厳密にする必要がある場合、つまり rgb(0, 70, 255, 0.5) を除外する必要がある場合は、両方のケースを | で融合する必要があります。:

var rgbRegex = /(^rgb\((\d+),\s*(\d+),\s*(\d+)\)$)|(^rgba\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.\d+)*\)$)/; 

http://jsfiddle.net/YxU2m/2/

Answer 6

この正規表現は、正規表現の複雑さとカバーされるユースケースの数との間の適切な妥協点です。

/(rgb\(((([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5]),\s*){2}([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\)))|(rgba\(((([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5]),\s*){3}(1|1.0*|0?.\d)\)))/

rgb と rgba は、4 番目の引数が必要な場合とそうでない場合があるため、異なる方法で処理する必要があります。

この正規表現はそれを考慮に入れています。また、次のことも扱います。

• 1、2、または 3 桁の RGB 値
• 0 未満および 255 を超える RGB 値
• (いくつかの) スペース
• rgba に 4 番目の値がありません
• RGB の 4 番目の値

この正規表現は考慮されません:

• すべての有効なタイプの間隔
• パーセンテージ ベースの RGB 値

Answer 7

パターンの場合: rbga(12,123,12,1) rbga(12,12,12, 0.232342) rgb(2,3,4)

/^(rgba|rgb)\(\s?\d{1,3}\,\s?\d{1,3}\,\s?\d{1,3}(\,\s?(\d|\d\.\d+))?\s?\)$/

Answer 8

必要なすべてを正確に実行する正規表現を作成することは不可能です。核となる難点は、一方ではカラー値を取得したいということですが、他方では、G、B、A の間にカンマがあるかどうかは、R と G の間にカンマがあるかどうかに依存します。 have that conditionality は、G 値 (および B と A) の条件付きキャプチャ グループを持つことです。ただし、 ["rgb(1,2,3)", "1", "2", "3"]のような結果値のみが必要です。条件付きとは、構文規則を適切に解析する式が必要な場合、["rgb(1,2,3)", null, null, null, null, "1", "2", "3", null] . 私はそれを回避する方法がわかりません。

とはいえ、正規表現後のクイック フィルターを使用して、そのわずかな乱雑さを処理する簡単な方法があります。適切な正規表現を使用すると、必要なのは結果からすべての null を削除することだけです。これは、結果の配列に filter() を適用することで実行できます。また、非キャプチャ グループ /(?:...)/ は、ここであなたの友人です。結果配列にキャプチャを追加せずに、物事をグループ化して代替を作成できます。

色と不透明度の値のルールは、CSS ドキュメントに基づいています。

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb()
• https://developer.mozilla.org/en-US/docs/Web/CSS/number
• https://developer.mozilla.org/en-US/docs/Web/CSS/percentage

だから、ここに私のベストショットがあります：

var testStrings = [
    // These should succeed:
    "rgb(0, 70, 255)",
    "rgba(0, 70, 127, 0.5)",
    "rgba(0, 70, 255, .555)",
    "rgba(0, 70, 255, 1.0)",
    "rgba(0, 70, 255, 5%)",
    "rgba(0, 70, 255, 40%)",
    "rgba(0, 70, 255, 0)",
    "rgba(0 70 255)",
    "rgba(0 70 25e1)",
    "rgb( 0 70 255 / 50 )",
    // These should fail:
    "rgb(0, 70 255)",
    "rgb(0 70 255, .5)",
    "rgb(0, 70 255)",
    "rgb(2.5.5)",
    "rgb(100, 100, 100 / 30)",
];

// It's easiest if we build up the regex string from some meaningful substrings.
// "comma" supports arbitrary space around a comma.
var comma = "\\s*,\\s*";
// "number" supports signed/unsigned integers, decimals,
// scientific notation, and percentages.
var number = "([+-]?\\d*.?\\d+(?:e[+-]?\\d+)?%?)";
// "commaList" matches 3- or 4-tuples like "0, 70, 255, 50".
var commaList = number + comma + number + comma + number +
                    "(?:" + comma + number + ")?";
// "noCommaList" supports "space-separated" format, "0 70 255 / 50".
var noCommaList = number + "\\s+" + number + "\\s+" + number +
                      "(?:\\s*/\\s*" + number + ")?";

// Here's our regex string - it's just the "rgb()" syntax
// wrapped around either a comma-separated or space-separated list.
var rgb = "^rgba?\\(\\s*(?:" + commaList + "|" + noCommaList + ")\\s*\\)$";

// Finally, we create the RegExp object.
var rgbRegex = new RegExp(rgb);

// Run some tests.
var results = testStrings.map(s => s.match(rgbRegex));

// Post-process to remove nulls
results = results.map(result => result && result.filter(s => s));

// Log the full regex string and all our test results.
console.log(rgbRegex);
console.log(results.map(result => JSON.stringify(result)).join('\n'));

Answer 9

で2 つのパターンを連結でき|ますが、4 つではなく 7 つのグループを処理する必要があります。

^rgb(?:\((\d+),\s*(\d+),\s*(\d+)\)|a\((\d+),\s*(\d+),\s*(\d+),\s*(1|0?\.\d+)\))$

これは次のようになります。

（jex.imによる画像）

完全ではありませんが、質問に答える必要があります。

テストとデバッグの場合:

• regex101 (Java を使用してください!)
• デバッグエクス

---

グループを処理するには、置換を使用できます$1$4-$2$5-$3$6-$7。

だからあなたは得るでしょう

in:  rbg(1,2,3)
out: 1-2-3-

in:  rgba(1,2,3,0.3)
out: 1-2-3-0.3

その後、分割できます。