拆分包含 rgba 值的颜色列表答案

【问题标题】：Split a list of colors containing rgba values拆分包含 rgba 值的颜色列表
【发布时间】：2014-10-16 14:59:05
【问题描述】：

我的标签具有包含 十六进制颜色 列表的数据属性。

<span data-color="#ffffff,#000000"></span>

我目前用 "," 将该列表拆分以得到一个真正的数组。

但是现在这些标签的数据属性中开始包含 rgba 颜色。

<span data-color="rgba(255,255,255,.75),#000000"></span>

当然，拆分解决方案不再有效。
最好的解决方法是什么？

我的意思是，我可以验证 "," 之前是否没有 ")"，但必须有更优雅的解决方案...

【问题讨论】：

或许从这里开始：how to identify a given string is hex color format

标签： javascript jquery arrays custom-data-attribute

【解决方案1】：

使用正向前瞻的简洁正则表达式。

var string = "rgba(255,255,255,.75),#000000";
string.split(/(?:,(?=#)|,(?=r))+/);

["rgba(255,255,255,.75)", "#000000"]

使用十六进制、rgb 和 rgba 颜色。

【讨论】：

【解决方案2】：

这是一个非常简单的正则表达式解决方案，我只是用 ",#" 或 ")," 来分割，

var string = 'rgba(255,255,255,.75),#000000';
var split = string.split(/,#|\),/));

【讨论】：

return ["rgba(255,255,255,.75", "#000000"], 缺少 rgba 值的结束 ")"。
糟糕，你说得对，这个解决方案并不完美。
这也不会拆分像'#000000,rgba(0,0,0,1)'这样的字符串

【解决方案3】：

没有正则表达式的解决方案是将十六进制值转换为 rgba 值：

function parse(str)
{
    while (str.indexOf('#') >= 0)
    {
        var hex = str.substr(str.indexOf('#'), 7);
        str = str.replace(hex, rgba_from_hex(hex));
    }
    return str.split('rgba');
}

function rgba_from_hex(hex) // expects format '#rrggbb'
{
    return 'rgba(' + parseInt(hex.substr(1, 2), 16) + ',' + parseInt(hex.substr(3, 2), 16) + ',' + parseInt(hex.substr(5, 2), 16) + ', 1)';
}

【讨论】：

【解决方案4】：

在您的情况下，最好使用另一种方法：通过一个正则表达式查找两种颜色模式。

// v - attribute value
var result = v.match(/(?:#[\da-f]{3,6}|rgba\(\d{1,3}\,\d{1,3}\,\d{1,3}\,[\d.]+\))/g) || [];

Demo

【讨论】：

但是使用这种技术，我会失去颜色顺序。