使用JavaScript從CSS文件中拉出顏色

我正在上傳一個css文件，我希望從該文件記錄引用的每種顏色。使用JavaScript從CSS文件中拉出顏色

因此，如果css文件有{background-color:#ffffff; color:#000000;}，我希望能夠創建一個列表：#ffffff, #000000。

什麼是這樣做的最佳方式？
我工作的這個項目是在GitHub上，如果你想一些參考：https://github.com/yeremenko/farbe

預先感謝您的任何幫助，您可以提供！

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

來源

2014-02-26 Sergey

我不知道這完全回答你的問題，但如果你有CSS文件，你可以閱讀其內容，那麼你可以簡單地解析出的顏色。請記住，CSS內部有更多類型的顏色規範。

實例：

#FFFFFF或#FFF十六進制規範;

正則表達式：#[0-9aA-fF]{3}和#[0-9aA-fF]{6}

(255,255,255)或(255,255,255,1) RGB或RGBA說明書

正則表達式：\([0-9]{1,3}(*, *)[0-9]{1,3}(*, *)[0-9]{1,3}(*, *[0-1]{1}(\.[0-9]*)?)\)

white作爲顏色名規範

這可能有點困難 - 找到這些可能是最簡單的方法是在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

希望它可以幫助至少一點！

來源

2014-02-26 08:47:09 Dropout

@Sergey你也問過關於獲取CSS文件和閱讀嗎？ – Dropout

嘿@滴水非常感謝您的幫助！我會試試看，回覆給你，但看起來不錯。我能夠使用reader.readAsText（selectedFile）讀取文件; – Sergey

正則表達式'＃[0-9aA-fF] {3}'和'＃[0-9aA-fF] {6}'似乎也與'＃footer'和'＃result'匹配。任何想法爲什麼會發生？ – Sergey

使用JavaScript從CSS文件中拉出顏色

回答

相關問題