regex javascript-match-RGB und RGBA

Derzeit habe ich diese regex passt auf einen RGB-string. Ich brauche es so erweitert, dass es ist robust genug, um dem übereinstimmen, entweder in RGB oder 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"]

stackoverflow.com/questions/638948/...
Das wird eine Menge der false-negatives. Leerzeichen sind erlaubt vor dem Komma und Prozent-Werte erlaubt sind anstelle von Dezimalstellen.

InformationsquelleAutor fortuneRice | 2011-09-25

8

Wird dies tun?
```
var rgbRegex = /^rgba?$(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?$$/
```
- Dies wird ein zurück rgb(0,0,0, 0.5); gültig - das ist nicht gültige rgb Farbe.
InformationsquelleAutor Rusty Fausak

Es ist nicht so einfach -, ein rgb-illegal mit einem vierten parameter.
Sie müssen auch erlauben Prozentsatz Dezimalzahlen als auch als integer-Werte
für die rgb-zahlen. Und Leerzeichen sind erlaubt, fast überall.

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;
}

//testing:

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

rgb ist illegal mit einem vierten parameter - Wie mit CSS-Farben, Ebene 4, rgba() ist ein alias für rgb(). In Browsern, die Implementierung der Level-4-Norm, Sie akzeptiert die gleichen Parameter und die gleiche Weise Verhalten. Quelle

InformationsquelleAutor kennebec

5

Machte ich einen regex, der überprüft, ob die rgb() und rgba () - Werte. Es prüft, für 3-Tupeln von 0-255 und dann eine optionale dezimale Zahl zwischen 0-1 für Transparenz. 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*?)?$
```
Gebrochen und in die verschiedenen Teile, die wir haben:
```
rgba?$ //Match rgb( or rgba( as the a is optional
```
0-255 ist abgestimmt mit Wechsel von:
```
\d\d? //Match 0-99

1\d\d //Match 100 - 199

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

25[0-5] //Match 250 - 255
```
Den Umgang mit Komma und Leerzeichen um die 0-255 Tupel nimmt einigen Raum. Ich Spiel 0-255 Tupel mit verbindlichen nachgestellte Komma und optionalen Leerzeichen zweimal
```
(25[0-5]|2[0-4]\d|1([0-9]){1,2}|\d\d?)\s*,\s*){2}
```
Dann eine 0-255 Tupel mit optionalem Komma und Raum - ermöglicht die rgb () - Werte ohne das nachgestellte Komma
```
(25[0-5]|2[0-4]\d|1([0-9]){1,2}|\d\d?),?\s*
```
Dann kommt eine optionale 0-1 als ganze Zahl oder Dezimalzahl:
```
([01]\.?\d*?)? //0 or 1 needed, dot and decimal numbers optional
```
Und wir am Ende mit einer schließenden Klammer
```
$
```
- Besser wäre zu erklären, wie: 25[0-5] = match-zahlen von 250 auf 255. 2[0-4]\d = Match-zahlen von 200 bis 249. 1\d\d = match-zahlen von 100 bis 199. \d\d? = Platzhalter für eine beliebige Anzahl von 0 bis 99 (die ? macht die zweite Stelle optional). Die Art und Weise Sie erklärt, dass es falsch ist: 25[0-5] // If tripple digit starting with 25 then last number must be 0 ist falsch, so ist 2[0-4]\d // If tripple digit starting with 2, second digit must be 0-5 eine unvollständige Beschreibung. 😉
- Hinzufügen ,\s? ist unzureichend. rgb/a können so viele Leerzeichen, wie Sie möchten vor dem Komma und nach dem Komma, so \s*,\s* wäre der richtige Weg.
- Aktualisierte Antwort mit Verbesserungen @RokoC.Buljan. Viel einfacher Weg, um zu erklären, die Zahl passenden:)
InformationsquelleAutor Pistus
2

Wenn Sie müssen streng sein, d.h. es auszuschließen, rgb(0, 70, 255, 0.5), Sie müssen Lunte beiden Fällen zusammen mit | :
```
var rgbRegex = /(^rgb$(\d+),\s*(\d+),\s*(\d+)$$)|(^rgba$(\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.\d+)*$$)/; 
```
http://jsfiddle.net/YxU2m/2/
- diese /(^- rgb - ((\d+),\s*(\d+),\s*(\d+))$)|(^rgba((\d+),\s*(\d+),\s*(\d+)(,\s*\d+(\.\d+)?)*)$)/ich Erlaube rgba-Farbe ist mit einer Dezimalzahl in das alpha wie "rgba(0, 0, 0, 0)"
InformationsquelleAutor mihai
1

ich dieses es ist Hilfe
```
(.*?)(rgb|rgba)$(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?$/i
```
wenn Sie das Kontrollkästchen rgba(102,51,68,0.6)

wird es wieder
```
1.  [0-0]   ``
2.  [0-4]   `rgba`
3.  [5-8]   `102`
4.  [9-11]  `51`
5.  [12-14] `68`
6.  [15-18] `0.6`
```
und wenn Sie überprüfen rgb(102,51,68)

wird es wieder
```
1.  [21-21] ``
2.  [21-24] `rgb`
3.  [25-28] `102`
4.  [29-31] `51`
5.  [32-34] `68`
```
- Sie können es verwenden, mit aus (.*?)
- Demo
- dies wird es ermöglichen, rgb(0,0,0,0)
- Ja, es wird zulassen rgb(0,0,0) schwarz Farbe
- richtig, aber es erlaubt auch, rgba(0,0,0,0), die keine gültige Farbe, string
InformationsquelleAutor vipmaa
1

Dieser regex ist ein guter Kompromiss zwischen der Komplexität der regex-und die Anzahl der Anwendungsfälle abgedeckt.
```
/(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 und rgba müssen anders behandelt werden, als man braucht, das 4. argument und nicht.

Dieser regex berücksichtigt. Es befasst sich auch mit:
- 1, 2 oder 3-stelliger rgb-Werte
- rgb-Werte unter 0 und über 255
- (einige) Bereiche
- ein 4. Wert fehlt rgba
- ein 4. Wert in rgb
Diese regex nicht berücksichtigt:
- jeder rechtlichen Art von Abstand
- prozentuale rgb-Werte
InformationsquelleAutor Votemike

Versuchen Sie das folgende Skript für RGBA-Wert, das Ergebnis ist ein Objekt.

JS:

       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);

InformationsquelleAutor GibboK

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.