Geek asks and answers

Regular expression to match a single CSS property

I currently have a large batch of HTML text, and I have several CSS properties that resemble the following:

font:16px/normal Consolas;
font:16px/normal Arial;
font:12px/normal Courier;

which is also associated with several other CSS properties and other related HTML values ​​and tags.

I am trying to write a regular expression that only captures these “font styles”, so if I had the following two paragraphs:

<p style='font:16px/normal Arial; font-weight: x; color: y;'>Stack</p>
<span style='color: z; font:16px/normal Courier;'>Overflow</span>
<br />
<div style='font-family: Segoe UI; font-size: xx-large;'>Really large</div>

it will match properties starting with font:and ending with a semicolon ;.

I played using RegexHero , and the closest I got:

\b(?:font[\s*\\]*:[\s*\\]*?(\b.*\b);)

which gave the following results:

font:bold;                   //Match
font:12pt/normal Arial;      //Match
font:16px/normal Consolas;   //Match
font:12pt/normal Arial;      //Match
property: value;             //Not a Match
property: value value value; //Not a Match

HTML, , , , , .

, .

+5
5

.*, , . , .. .*?, .

:

    \b(?:font\s*?:\s*([^;>]*?)(?=[;">}]))

http://rubular.com/r/yRcED2n6wu.

+4

\b((?:font:[^;]*?)(?:;|'))


\b             # Assert position at a word boundary
(              # Match the regular expression below and capture its match into backreference number 1
   (?:            # Match the regular expression below
      font:          # Match the characters "font:" literally
      [^;]           # Match any character that is NOT a ";"
         *?             # Between zero and unlimited times, as few times as possible, expanding as needed (lazy)
   )
   (?:            # Match the regular expression below
                     # Match either the regular expression below (attempting the next alternative only if this one fails)
         ;              # Match the character ";" literally
      |              # Or match regular expression number 2 below (the entire group fails if this one fails to match)
         &apos;              # Match the character "&apos;" literally
   )
)
+4

RegEx:

(?:font:[^;]*);

font:16px/normal Arial; font:16px/normal Courier; .

+2

:

\bfont\s*:\s*([^;}"'<>]+)(?<=\S)

, . :

.foo { font: sans-serif 80% }
... style="font: sans-serif 80%" ...
+1

I'm not quite sure what you are asking, but I think this problem can be solved by replacing your style tags with CSS. The problem can be solved by placing the following in the head tag of your HTML.

<style type="text/css">

h1 {

    font-family: Arial;
    font-size: 15;
    font-style:oblique;

}

h2 {
    font-family: Courier;
    font-size: 16;
    font-style:oblique;
 }
 h3 {
    font-family: Segoe UI;
    font-size: xx-large;
    font-style:oblique;
 }


</style>

Now all you have to do to make an expression (or yourself), set one of these font styles is to surround it with a tag:

<h1> Cool Text!  </h1>

Good luck

0
source

More articles:


All Articles