正则表达式 javascript 以匹配 RGB 和 RGBA

【问题标题】：regex javascript to match both RGB and RGBA正则表达式 javascript 以匹配 RGB 和 RGBA
【发布时间】：2011-11-24 12:31:20
【问题描述】：

目前我有这个匹配 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"]

【问题讨论】：

标签： javascript regex rgb rgba


【解决方案1】：

这样可以吗？

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

【讨论】：

  • 这个会返回rgb(0,0,0, 0.5); valid - 这不是一个有效的rgb颜色。
  • 感谢您的帮助。 /rgba?((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?)/gmi;效果很好。 rgba(255, 240, 71, 0.22);
  • 这个失败了 "rgba(0, 255, 0, .5)"
【解决方案2】：

这不是那么简单——带有第四个参数的 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

【讨论】：

  • rgb 带有第四个参数是非法的 - 从 CSS 颜色级别 4 开始，rgba() 是 rgb() 的别名。在实现 4 级标准的浏览器中，它们接受相同的参数并以相同的方式运行。 Source
【解决方案3】：

我制作了一个检查 rgb() 和 rgba() 值的正则表达式。它检查 0-255 的 3 个元组，然后检查 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

我们以右括号结束

\)

【讨论】：

  • 最好解释为：25[0-5] = 匹配从 250 到 255 的数字。 2[0-4]\d = 匹配从 200 到 249 的数字。 1\d\d = 匹配从 100 到 199 的数字。 \d\d? = 匹配从 0 到 99 的任意数字（? 使第二个数字可选）。您解释它的方式是错误的：25[0-5] // If tripple digit starting with 25 then last number must be 0 不正确，2[0-4]\d // If tripple digit starting with 2, second digit must be 0-5 的描述也不完整。 ;)
  • 补充一点，,\s? 是不够的。 rgb/a 可以在逗号前后有任意多个空格，所以\s*,\s* 是正确的方式。
  • 用你的改进更新了答案@RokoC.Buljan。解释数字匹配的更简单的方法:)
  • 关于 alpha 部分：分数可以以 . 开头，例如 "rgba(0,0,0,.5)" 是有效的。 [01] 实际上是可选的。这对你有意义吗：([01\.]\.?\d*?)?
  • 这仍然不起作用。它捕获第一个匹配组的“,”。
【解决方案4】：

尝试以下脚本获取 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);

【讨论】：

  • 该死的，谢谢。这个有效。它们中的大多数都不起作用。
  • 它是用于 rgba，您需要更改 rgb 的正则表达式，仅删除 alpha 值的匹配
【解决方案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/

【讨论】：

  • 这个 /(^rgb((\d+),\s*(\d+),\s*(\d+))$)|(^rgba((\d+),\s* (\d+),\s*(\d+)(,\s*\d+(\.\d+)?)*)$)/i 将允许 rgba 颜色在 alpha 中带有小数点，例如 "rgba(0, 0 , 0, 0)"
【解决方案6】：

你可以使用这个正则表达式：

new RegExp('(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)','igm');

示例： 

function myFunction() {
    var myRegex = new RegExp('(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)','igm');
    var el = document.getElementById('input');
    document.getElementById('value').textContent = myRegex.test(el.value);

}
<input id="input" />
<button onclick="myFunction()">Submit</button>
<br />
<p id="value"></p>

应该匹配：

  • #111
  • #1111
  • #222222
  • RGB(3,3,3)
  • rgba(4%,4,4%,0.4)
  • hsl(5,5,5)
  • hsla(6,6,6,0.6)

不应匹配：

  • #11
  • RGB(2,2,2,2)
  • RGB(2,2,2),
  • rgba(3,3,3,33)
  • rgba(3,3,3,1)a
  • hsla(4,4,4,4)

【讨论】：

    【解决方案7】：

    我用这个是有帮助的

    (.*?)(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`

    【讨论】：

    • 你可以在没有 (.*?) 的情况下使用它
    • 这将允许 rgb(0,0,0,0)
    • 是的，它将允许 rgb(0,0,0) 为黑色
    • 对，但它也允许 rgba(0,0,0,0) 不是有效的颜色字符串
    【解决方案8】：

    这个正则表达式在正则表达式的复杂性和所涵盖的用例数量之间取得了很好的折衷。

    /(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 需要区别对待，因为一个需要第四个参数，一个不需要。

    这个正则表达式考虑到了这一点。它还处理：

    • 1、2 或 3 位 rgb 值
    • RGB 值小于 0 大于 255
    • （一些）空格
    • rgba 中缺少第 4 个值
    • RGB 中的第四个值

    这个正则表达式不考虑：

    • 每种合法的间距类型
    • 基于百分比的 RGB 值

    【讨论】：

      【解决方案9】：

      模式：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?\)$/

      【讨论】：

        【解决方案10】：

        Pistus 的回答似乎是我最接近正常工作的答案。问题是您不能尝试使用 {2} 运行相同的匹配组两次，它只会为您提供第二个匹配组的两次相同的答案。

        这将处理以下草率的 CSS：

        rgba(255 , 255 , 255 , 0.1 )
rgba( 255 , 255, 255 , .5 )
rgba( 0, 255 , 255 , 1.0 )
rgb( 0, 255 , 255 )
rgba( 0, 255 , 255 ) // <-- yes, not correct, but works

        并给你一个好的，干净的回应。我并不真正需要能够正确验证的东西，而是需要能够提供干净数字的东西。

        最后，这对我有用：

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

        Regex101 的链接：https://regex101.com/r/brjTFf/1

        另外，我清理了匹配组，所以你得到的只是最干净的 JS 数组：

        let regex = /rgba?\(\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01\.]\.?\d?)?\s*\)/;
let bgColor = "rgba(0, 255, 0, .5)";

console.log( bgColor.match( regex ) );

        这是控制台的输出：

        [
    "rgba(0, 255, 0, .5)",
    "0",
    "255",
    "0",
    ".5"
]

        【讨论】：

          【解决方案11】：

          您可以通过| 连接 2 个模式，但是您必须处理 7 个组而不是 4 个。

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

          这看起来像：

          （图片来自jex.im）

          它不是很完整，但应该回答这个问题。

          用于测试和调试：

          要处理组，您可以使用替换：$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

          然后你就可以拆分了。

          【讨论】：

            【解决方案12】： 
            /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*((0+(?:\.\d+)?)|(1+(?:\.0+)?)))?\)$/.test('rgba(255,255,255,1.000000)')

            【讨论】：

            • 如果您在回答中包含其他信息/解释，将会很有用。
            【解决方案13】：

            另一个版本分别支持 rgb 和 rgba，没有严格的空格并允许模式 rgba(255,255,255, .5)

            (rgb\((((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*?)?\))|(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*(0?\.\d*|0(\.\d*)?|1)?\))

            【讨论】：

              【解决方案14】：

              您可以使用它：100% 捕获 rgba 或 rgb 颜色代码

              ^(rgba(\((\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?((0|(0.[0-9][0-9]?)|1)|(1?[0-9][0-9]?\%))(\s+)?\)))|rgb(\((\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?\))$

              【讨论】：

                猜你喜欢
                • 2017-10-21
                • 2010-10-25
                • 2011-11-29
                • 2012-09-22
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多
                热门标签
                Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode