正則表達式的CSS字體聲明

這是在CSS字體聲明：正則表達式的CSS字體聲明

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

這是一個正在努力獲得像素值一個正則表達式：

value.match(/(normal|italic)?\s*(normal|small-caps)?\s*(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\s*(\d+)px(?:\/(normal|[\d\.]+))?\s+(.*)/);

，幫助我得到這個：

var fontStyle = match[1], 
     // font variant is not used 
     // fontVariant = match[2], 
     fontWeight = match[3], 
     fontSize = match[4], 
     lineHeight = match[5], 
     fontFamily = match[6];

我想解析字體大小或線高不只是像素的任何值，但

[px|cm|mm|em|pt|pc|in]

但我無法修改它。有人可以幫忙嗎？

最終結果：

(\d+(?:px|cm|mm|em|pt|pc|in|%))

注意括號：

(normal|italic)?\s*(normal|small-caps)?\s*(normal|bold|bolder|lighter|100|200|30‌0|400|500|600|700|800|900)?\s*(\d+(?:px|cm|mm|em|pt|pc|in)*)(?:\/(normal|[\d\.]+)‌)?\s+(.*)

來源

2014-10-28 AndreaBogazzi

['vh'，'vw'，'vmin'和'vmax']（http://www.w3.org/TR/css3-values/#viewport-relative-lengths）？ – 2014-10-28 10:11:35

確定谷歌搜索他們....回到5分鐘。 – AndreaBogazzi 2014-10-28 10:13:56

現在我假裝vw vh和rem不存在。 – AndreaBogazzi 2014-10-28 10:35:08

只是改變px在你的正則表達式。

更新：現在還捕獲該值。

來源

2014-10-28 10:19:24 Toto

我試圖做到這一點，但它認爲度量單位是一種附加匹配。我希望它匹配6px或5in作爲單個匹配，而不是兩個單獨的匹配。 – AndreaBogazzi 2014-10-28 10:34:29

@AndreaBogazzi：看我的編輯。 – Toto 2014-10-28 12:04:52

謝謝大家，這是最適合我的。另一個產生更多結果的方法，以及我自己做的那個（\ d + em | \ d + px | \ d + cm | \ d +）....是如此醜陋。甚至感謝vw vh和％單位，但我放棄它們我在parentesis之後添加了一個星號，即使沒有度量單位也接受。？s *（normal | small-caps）？s *（normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900）？ \ s *（\ d +（?: px | cm | mm | em | pt | pc | in）*）（？：\ /（normal | [\ d \。] +））？\ s +（。*） – AndreaBogazzi 2014-10-28 13:14:01

不要用正則表達式解析CSS。相反，讓引擎做到這一點 - 它已經知道如何，完全！

var elt = document.createElement('div'); 
 
elt.style.font = '1em sans-serif'; 
 
// individual properties can now be accessed as elt.style.fontFamily etc. 
 

 
['fontFamily', 'fontSize'].forEach(function(x) { 
 
    document.writeln(x, " is ", elt.style[x], ". "); });

然而，對於這個工作，font規範的格式必須是正確的（以正確的順序）。請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/font。

來源

2014-10-28 12:29:16

感謝您的建議，我會提出它，但如果可能的話，我會跳過打擾文檔，在我的情況是一個SVG，它並沒有我需要的所有屬性或它並沒有跨所有瀏覽器。（nodejs，oldIE ...我不是那麼專業，改變意味着從頭開始測試一切） – AndreaBogazzi 2014-10-28 13:43:50

正則表達式的CSS字體聲明

回答

相關問題