expresión regular para coincidir con un CSS propiedad individual

Question

Actualmente tengo un gran lote de texto HTML y tengo varias propiedades CSS similares a los siguientes:

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

que también se incluye con varias otras propiedades CSS y otros asociados Valores HTML y etiquetas

He estado tratando de escribir una expresión regular que sólo va a captar estos "estilos de fuente", por lo que si tuviera los siguientes dos párrafos:

<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> 

que sólo coinciden con las propiedades y comenzando con font: terminando con un punto y coma ;.

He jugado alrededor de usar RegexHero y el más cercano que he conseguido era:

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

que arrojó los siguientes resultados:

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 

pero cuando he tratado de dejar caer en un gran bloque de HTML, las cosas parecían confundirse y se seleccionaron bloques grandes en lugar de dentro de los límites especificados previamente.

Estaré encantado de proporcionar cualquier información adicional y datos de prueba que pueda.

Answer 1

Has dejado .* codicioso, lo que significa que comerá y comerá y solo se detendrá en el último punto y coma disponible. Agregue un signo de interrogación, es decir, .*? para que no sea codicioso.

Actualizado:

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

He probado todos los ejemplos en esta página en http://rubular.com/r/yRcED2n6wu.

Answer 2

No estoy muy seguro de lo que está preguntando, pero creo que este problema se puede resolver reemplazando sus etiquetas de estilo con CSS. El problema podría resolverse colocando lo siguiente en la etiqueta Head de su 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> 

Ahora, todo lo que tiene que hacer para que una expresión (o usted mismo) establecer uno de estos estilos de fuente es rodearlo con una etiqueta de este modo:

<h1> Cool Text! </h1> 

buena suerte!

Answer 3

probar este RegEx:

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

que coincide con font:16px/normal Arial; y font:16px/normal Courier; de su fragmento anterior.

Answer 4

probar este

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

Explicación

\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) 
     '    # Match the character “'” literally 
    ) 
) 

Answer 5

me gustaría sugerir:

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

que también funcionará para los casos en que otras respuestas fallan. Por ejemplo:

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