регулярное выражение javascript для соответствия как RGB, так и RGBA - PullRequest
Новая
       82

регулярное выражение javascript для соответствия как RGB, так и RGBA

5 голосов
/ 25 сентября 2011

В настоящее время у меня есть это регулярное выражение, которое соответствует строке 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"]

Ответы [ 7 ]

7 голосов
/ 25 сентября 2011

Это не так просто - rgb недопустим с четвертым параметром.Вам также необходимо учитывать десятичные дроби в процентах, а также целочисленные значения для чисел 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
7 голосов
/ 25 сентября 2011

Будет ли это делать? 

var rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
5 голосов
/ 06 июля 2015

Я сделал регулярное выражение, которое проверяет значения rgb () и rgba (). Он проверяет наличие трех кортежей от 0 до 255, а затем необязательное десятичное число от 0 до 1 для прозрачности. 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 занимает некоторое пространство. Я сопоставляю 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*

Затем следует необязательный 0-1 как целое или десятичное число: 

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

И мы заканчиваем закрывающей скобкой 

\)
2 голосов
/ 25 сентября 2011

Если вам нужно быть строгим, то есть исключить 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/

1 голос
/ 17 мая 2016

Попробуйте следующий скрипт для значения 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);
1 голос
/ 15 июля 2015

Это регулярное выражение является хорошим компромиссом между сложностью регулярного выражения и количеством рассматриваемых вариантов использования. 

/(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
  • значения RGB до 0 и более 255
  • (некоторые) пробелы
  • 4-е значение отсутствует в rgba
  • 4-е значение в rgb

Это регулярное выражение не учитывает:

  • каждый допустимый тип интервала
  • значения RGB в процентах
1 голос
/ 23 декабря 2014

я использую это, это помощь 

(.*?)(rgb|rgba)\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/i

, если вы проверите rgba(102,51,68,0.6)

, он вернет 

1.  [0-0]   ``
2.  [0-4]   `rgba`
3.  [5-8]   `102`
4.  [9-11]  `51`
5.  [12-14] `68`
6.  [15-18] `0.6`

и если вы проверите rgb(102,51,68)

вернется 

1.  [21-21] ``
2.  [21-24] `rgb`
3.  [25-28] `102`
4.  [29-31] `51`
5.  [32-34] `68`
...