javascript - css 字体声明的正则表达式

Question

这是css中的字体声明:

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

这是一个用于获取 px 值的正则表达式:

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，但是

[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+(.*) 

Answer 1

不要使用正则表达式解析 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 .