Regexp for css font declaration

Question

This is a font declaration in css:

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

This is a regexp that is working to get the value in 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+(.*)/);

And helps me getting this:

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

I would like to parse any value for font size or lineheight non just px, but

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

But i'm not able to modify it. Can someone help?

Final result:

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

What about vh, vw, vmin and vmax?

David Thomas
– David Thomas

2014-10-28 10:11:35 +00:00
Commented Oct 28, 2014 at 10:11 — David Thomas
– David Thomas, Commented Oct 28, 2014 at 10:11
ok googling them.... back in 5 minutes.

AndreaBogazzi
– AndreaBogazzi

2014-10-28 10:13:56 +00:00
Commented Oct 28, 2014 at 10:13 — AndreaBogazzi
– AndreaBogazzi, Commented Oct 28, 2014 at 10:13
For now i pretend that vw vh and rem does not exist.

AndreaBogazzi
– AndreaBogazzi

2014-10-28 10:35:08 +00:00
Commented Oct 28, 2014 at 10:35 — AndreaBogazzi
– AndreaBogazzi, Commented Oct 28, 2014 at 10:35

user663031 · Accepted Answer · 2014-10-28 12:29:16Z

1

Do not parse CSS with regexps. Instead, let the engine do it--it already knows how to, perfectly!!

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], ". "); });

However, for this to work, the format of the font specification must be correct (in the correct order). See https://developer.mozilla.org/en-US/docs/Web/CSS/font.

answered Oct 28, 2014 at 12:29

user663031

Sign up to request clarification or add additional context in comments.

1 Comment

AndreaBogazzi Over a year ago

Thanks for suggestion, i'm gonna propose it, but if possible i'm skipping bothering the document that in my case is an SVG and it doesn't have all the properties i need or it doesn't have across all browsers. ( nodejs, oldIE... i'm not so expert, changing would mean test everything from scratch )

Toto · Accepted Answer · 2014-10-28 12:04:35Z

0

Just change the px in your regex with:

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

Note the parenthesis.

Update: The value is also captured now.

edited Oct 28, 2014 at 12:04

answered Oct 28, 2014 at 10:19

Toto

91.7k63 gold badges97 silver badges135 bronze badges

4 Comments

AndreaBogazzi Over a year ago

I tried to do that, but it recognize the measure unit as an additiona match. I want it to match 6px or 5in as a single match, not two separate.

AndreaBogazzi Over a year ago

Thanks everyone, this was what best suited me. The other where producing more results, and the one that i did by myself (\d+em|\d+px|\d+cm|\d+) .... was so ugly. Thanks even for the vw vh and % units, but i'm discarding them I added an asterisk after the parentesis to accept even without measure unit. (normal|italic)?\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 Over a year ago

So the roundy brakets are both for capturing in match and for logical grouping? and that is why we use that "?:" meaning do not capture?

Toto Over a year ago

@AndreaBogazzi: That's right, (?:...) means a non capture group.

Collectives™ on Stack Overflow

Regexp for css font declaration

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related