使用javascript匹配函數捕獲十六進制顏色代碼

-1

我正在使用javascript捕獲元素背景顏色的十六進制顏色代碼。我使用這個腳本：使用javascript匹配函數捕獲十六進制顏色代碼

style = select.find(":selected").attr("style"); 
match = style.match(/background-color ?: ?(#[0-9a-f]{6})/i); 
console.log(match);

以上的比賽結果數組中的代碼有兩個要素：

0: "background-color:#f" 
1: "#f"

而且我想不通爲什麼我的正則表達式捕獲只有「＃」和第一實際6字符長十六進制代碼的字符。我試圖添加'lobal'修飾符，但仍然是相同的結果。我的正則表達式應該如何？

這是一個關於我想要的例子：從任何類型的內聯CSS的定義是這樣的：「border:1px solid #00ffff; background-color: #00ffaa; width: 500px ...etc」匹配「background-color: #00ffaa」的一部分，並提取了「#00ffaa」的一部分。

來源

2015-11-26 ACs

爲什麼不使用jquery並使用$（el）.css（'background-color'）？ –

這可能是因爲在＃後面期望＃[0-9a-f]中的6個而不是[0-9a-f]中的6個。您可以嘗試明確地將該部分括起來，即＃（[0-9a-f] {6}），以確保6綁定到[0-9] [a-f]。你也應該匹配大寫字母A-F。 – Mahout

你爲什麼想這樣做？你打算怎麼處理你回來的顏色？ –

試試這個正則表達式：

var string = "border:1px solid #00ffff; background-color: #00ffaa; width: 500px ...etc"; 
 

 
var answer = string.match(/background-color\s*:\s*([^;]+)/); 
 

 
console.log(answer); 
 

 
document.write(answer[0] + '<br>' + answer[1]);

希望它能幫助。

來源

2015-11-26 11:35:25

沒有必要用正則表達式解析整個樣式字符串，實際上這是一個可怕的想法。只需獲得'background-color'屬性的值即可。 –

@torazaburo。你是對的。 –

@torazaburo。問題是，看這裏：_http：//jsfiddle.net/cb6jdhy5/_瀏覽器返回十六進制爲rgb。 :( –

-1

嘗試以下

var txt='border:1px solid #00ffff; background-color: #00ffaa;'; 
 
var match = txt.match(/background-color ?: ?(#{1}(?:[A-F0-9]){6})(?![0-9A-F])/i); 
 
console.log(match); 
 
document.write(match[1])

來源

2015-11-26 11:38:36

如果十六進制寫成三位數字怎麼辦？ –

這是如何工作的？ –

有可能是更好的方式來完成你所想 - 這是什麼？

我認爲你想找到一些元素的顏色，因爲它意味着某種東西 - 比如，如果背景是藍色的，它是側邊欄，或者如果按鈕的背景是灰色的，它被禁用，或者在你的情況下，如果選擇的選項是粉紅色的，那麼它是一隻狗。實質上，您將應用程序的部分狀態存儲在CSS屬性中。但是，正如你發現的那樣，一旦你設置了CSS，將它重新取出可能並不是微不足道的。所以最基本的解決方案是查看是否有辦法在JS中管理應用程序的狀態。

就你而言，你似乎想要在select元素中獲取所選選項的背景顏色，以便對其進行操作。考慮爲每個選項維護一系列相關信息;或者將數據屬性放在您輕鬆獲得的每個選項上;或者其他一些不需要在樣式字符串中搜索的方法。其次，經驗豐富的HTML/CSS人非常贊同使用單獨的樣式屬性不如使用類更可取。通過類，我可以通過設置類來爲元素設置一組屬性;並且我可以輕鬆地使用標準DOM或jQuery API查詢，刪除或替換類。

第三，它也非常贊同使用regexp來解析語言 - 即使像CSS這樣簡單的語言 - 它也不是一個好主意。你總會錯過一些東西，然後你的正則表達式就會崩潰。例如，在您的原始正則表達式中，以及答案中的一箇中，正則表達式將不起作用，除非冒號周圍只有零個或一個空格。一些可憐的靈魂 - 也許你，也許是一些在今後六個月內出現的新人 - 將不得不尋找並修復當有人在冒號後放置兩個空間時會出現的錯誤。

或者你會假設背景顏色總是使用十六進制值設置的 - 並在此假設下構建你的代碼。但是隨後這個新人出現並決定使用hsl來指定一種顏色 - 並且代碼將再次破壞。第四，如果對你來說是個問題，只有在該元素上明確設置了背景顏色屬性時，「正則表達式字符串」方法才能起作用。例如，如果背景顏色來自CSS規則，那麼這種方法就不會選擇它。通常，這是人們建議使用getComputedStyle或jQuery的.css()這一點，這確實會起作用（儘管您仍然可以獲得rgb(r,g,b)格式，如果您確實希望使用十六進制格式，則必須轉換） - - 但問題仍然存在，爲什麼你需要將信息「存儲」到CSS中，然後再次返回？這當然有用例，但它們相對較少。

如果你確信你需要檢索的背景色，從特定元素的風格，並以十六進制格式（爲什麼？），然後得到它，並將其轉換：

backgroundColor = select.find(":selected").css('backgroundColor'); 
rgbColor = convertRGBToHex(style);

你可以找到在SO或其他地方有大量的方法來convertRGBToHex。

來源

2015-11-26 22:12:45

使用javascript匹配函數捕獲十六進制顏色代碼

回答

相關問題