从 JavaScript 中的 SVG 字符串中提取颜色

Question

我有svg文件，该文件以字符串格式存储在javascript中。我想提取文件中提到的所有颜色并将其存储在数组中。

颜色信息将在文件中表示为fill:#010101;。我想

1. 在文件中搜索:#字符
2. 提取六角形颜色
3. 将其存储在数组中
4. 再次搜索下一个颜色

SVG 文件的大小可能从 1kb 到 450Kb 不等。我可以使用.indexOf来查找:#的第一次出现，但是我被困在使用哪种方法来有效地获取所有颜色。

这是我所做的事情的小提琴：http://jsfiddle.net/mumg81qq/1/甚至小提琴也会因为我的 svg 弦:(而被挂起

编辑 ：如何修改 Javascript 正则表达式。需要从 SVG 字符串中提取值才能从 svg 字符串中获取十六进制/rgb 颜色吗？

Answer 1

我不知道

正则表达式在处理这个问题时会有多有效，但这样的事情可以工作（无论它有多慢）http://jsfiddle.net/vdugk40m/1/：

var info="fill:#010011;fill:#010012;fill:#010013;fill:#010014;";
var m, regex = /fill:#([A-F0-9]+)[;]/gi;
var colors = [];
do {
    m = regex.exec(info);
    if (m)
        colors.push(m[1]);
} while (m);
alert(colors);

如果需要字符串中的 #，请将左括号移到# 之前。

如果要将数组减少到仅唯一值（从 https://stackoverflow.com/a/14438954/579148 中移除）：

colors = colors.filter( onlyUnique );
function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

Answer 2

如果您只想捕获十六进制值（即 # 后面的 6 个字符），正则表达式组会派上用场

var r = new RegExp('fill:#([a-zA-Z0-9]{6})','g')
var res= [];
while(result = r.exec(file)) { 
   res.push(result[1]); 
}

在上面的代码段中，我匹配了 # 后面的 6 个字符，并将捕获的组存储在一个名为 res 的数组中

这是您的小提琴的修改版本来演示

http://jsfiddle.net/mumg81qq/3/

Answer 3

我喜欢保持简短，所以这是我的尝试：

var colors = [];
file.replace(/fill:(#[abcdef0-9]{6})/ig, function(v, c) { colors.push(c); return v; });

将填充数组colors如下所示：http://jsfiddle.net/ks92aau8/

请记住，如果您计划支持 RGBA（alpha 透明度）值，则需要在正则表达式中使用{8}而不是{6}。