使用Javascript从CSS文件中提取颜色

我正在上传一个css文件，我希望从中记录引用的每种颜色

因此，如果css文件有

{background color:#ffffff；color:#000000；}

，我希望能够创建一个由以下内容组成的列表：

#ffffff，#000000

这样做的最佳方式是什么？
如果您想要一些参考资料，我正在从事的项目是GitHub：

提前感谢您可能提供的任何帮助

function getFileContents () {
    var reader = new FileReader();

    reader.onload = function(contents) {
        var fileContents = contents.target.result;  //Stores file contents
        var singleColor  = /*magic*/;

    };

    reader.readAsText(selectedFile);            //Gets file contents into string

};

getFileContents();

---

我不确定这是否完全回答了你的问题，但是如果你有CSS文件并且你可以阅读它的内容，那么你可以简单地解析出颜色。请记住，CSS中有更多类型的颜色规范

示例：

• #FFFFFF

  或

  #FFF

  作为十六进制规范

正则表达式：

[0-9aA-fF]{3}

和

[0-9aA-fF]{6}

• （255255255）

  或

  （255255255,1）

  作为RGB或RGBA规范

正则表达式：

\（[0-9]{1,3}（*，*）[0-9]{1,3}（*，*）[0-9]{1,3}（*，*[0-1]{1}（\.[0-9]*）？）\）

• 白色

  作为颜色名称规范

这可能有点困难-通过在CSS中形成一个可用颜色名称列表并分别查找它们，可能最容易找到这些颜色名称

考虑到这一点，您可以执行

var cssContent = cssFile.readContent(); // get the file into a String
firstPattern = "/`#[0-9aA-fF]{3}/g";
var matches = firstPattern.exec(cssContent);
while(matches!=null){
    // append to your output
}
//and so on for other patterns

---

希望它至少有一点帮助

@Sergey你也在问关于获取CSS文件和阅读的问题吗？嘿@dropout非常感谢你的帮助！我会尝试一下，然后再给你回复，但是看起来很棒。我能够使用reader.readAsText（selectedFile）读取文件；正则表达式

#[0-9aA-fF]{3}

和

#[0-9aA-fF]{6}

似乎也与

#footer

和

#result

匹配。知道为什么会这样吗？@Sergey，这不应该发生，没有理由和他们匹配。尝试将其更改为

#[0-9aA-fF]{3}（*）和
#[0-9aA-fF]{6}（*）是什么
还将检查颜色后面是否有分号-ID后面永远不会有分号。