Parsear hoja de estilo con expresiones regulares

[neodani]

Buenas,

Estoy intentando parsear una hoja de estilo, con expresiones regulares. En mi intento de parsing, deseo encontrar todas las propiedades que coincidan, de la siguiente hoja de estilo

Código CSS:

* {
    margin: 0;
    padding: 0; }
 
body {
    border-top-color: #EAF3FA; /* Color barra superior */
    border-top-style: solid;
    border-top-width: 30px;
    color: #333333;
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; /*border-top-color:#464646; */
    font-size-adjust: none;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal; }
 
/* PARTE DE ARRIBA (TOP)
------------------------------------------------- */
#borde-top a {
    color: #0090EF;
    left: 15px;
    position: absolute;
    text-decoration: none;
    top: 7px; }
 
.login #borde-top a:hover { color: #000; }
 
/* TITULO PRINCIPAL (LOGO)
------------------------------------------------- */
h1 {
    background: url(../imagenes/header/logo-acceso-panel.png) no-repeat;
    display: block;
    height: 40px;
    margin-left: 15px;
    overflow: hidden;
    padding-bottom: 15px;
    text-indent: -9999px;
    width: 320px; }
 
/* FORMULARIO
------------------------------------------------- */
form {
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 8px;
    padding: 16px 16px 40px 16px; }
 
    form p { margin-bottom: 24px; }
 
/* Tamaño del recuadro */
#login {
    margin: 7em auto;
    width: 350px; }
 
/* Tamaño de las casillas USER Y PASS */
#user_pass, #user_login {
    font-size: 20px;
    margin-right: 6px;
    padding: 3px;
    width: 97%; }
 
/* Color texto input */
#login form input { color: #555555; }
 
/* Color de fondo LOGIN (azul claro) */
.login form { background-color: #eee; }
 
/* CASILLA >> RECORDARME
------------------------------------------------- */
form .forgetmenot {
    float: left;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 2px; }
 
/* BOTON >> INICIAR SESIÓN
------------------------------------------------- */
#login form .submit input {
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #CEE1EF;
    border-color: #80B5D0;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border: none;
    color: #224466;
    cursor: pointer;
    float: right;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
    font-size: 13px;
    margin-top: -6px;
    padding: 3px 5px;
    text-decoration: none; }
 
    #login form .submit input:hover {
        background-color: #9ACBEF;
        border-color: #328AB2;
        color: #FFF; }
 
/* FOOTER FORMULARIO
------------------------------------------------- */
#nav {
    margin: 0 0 0 8px;
    padding: 16px;
    text-align: center; }
 
.login #nav a { color: #777777; }
 
/* MENSAJES DE ERROR (FORMULARIO)
------------------------------------------------- */
#login_error {
    background-color: #FFEBE8;
    border-color: #CC0000;
    border-style: solid;
    border-width: 1px;
    margin: 0 0 13px 8px;
    padding: 8px; }
 

Debería encontrar estas 3 propiedades

Código CSS:

.login #borde-top a:hover{color:#000;}
.login form{background-color:#eee;}
.login #nav a { color: #777777; }
 

Y aquí la expresión regular que utilizo, que descrita sería algo así como

Encuentra todo lo que empiece por .login seguido de cualquier cosa tantas veces como quieras hasta encontrar una llave }

Código PHP:

$css = file_get_contents('style.css');
preg_match_all('/(\.login)(.*?)(})$/is',$css,$matches);
echo "<pre>";
echo print_r($matches,1);
echo "</pre>";
 

El resultado

Código:

<pre>Array
(
    [0] => Array
        (
        )

    [1] => Array
        (
        )

    [2] => Array
        (
        )

    [3] => Array
        (
        )
)
</pre>

Si quito la última llame me aparece mas cosas pero no me muestra todas las propiedades.

Código PHP:

  preg_match_all('/(\.login)(.*?)/is',$css,$matches); 
   

Código:

<pre>Array
(
    [0] => Array
        (
            [0] => .login
            [1] => .login
            [2] => .login
        )

    [1] => Array
        (
            [0] => .login
            [1] => .login
            [2] => .login
        )

    [2] => Array
        (
            [0] => 
            [1] => 
            [2] => 
        )

)
</pre>

Alguien es tan amable de echarme una mano?

Muchas gracias de antemano!

[neodani]

Intentando...

Todo lo que empiece por .login
Seguido por cualquier cosa
seguido de una llave abierta {
Cualquier cosa
Acabe con una llave }

Código PHP:

  preg_match_all('/(\.login)(.*?)\{(.*?)}*$/is',$css,$matches); 
   

Resultado:

Código:

<pre>Array
(
    [0] => Array
        (
            [0] => .login #borde-top a:hover { color: #000; }

/* TITULO PRINCIPAL (LOGO)
------------------------------------------------- */
h1 {
	background: url(../imagenes/header/logo-acceso-panel.png) no-repeat;
	display: block;
	height: 40px;
	margin-left: 15px;
	overflow: hidden;
	padding-bottom: 15px;
	text-indent: -9999px;
	width: 320px; }

/* FORMULARIO
------------------------------------------------- */
form {
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
	margin-left: 8px;
	padding: 16px 16px 40px 16px; }

	form p { margin-bottom: 24px; }

/* Tamaño del recuadro */
#login {
	margin: 7em auto;
	width: 350px; }

/* Tamaño de las casillas USER Y PASS */
#user_pass, #user_login {
	font-size: 20px;
	margin-right: 6px;
	padding: 3px;
	width: 97%; }

/* Color texto input */
#login form input { color: #555555; }

/* Color de fondo LOGIN (azul claro) */
.login form { background-color: #eee; }

/* CASILLA >> RECORDARME
------------------------------------------------- */
form .forgetmenot {
	float: left;
	font-weight: normal;
	margin-bottom: 0;
	margin-left: 2px; }

/* BOTON >> INICIAR SESIÓN
------------------------------------------------- */
#login form .submit input {
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #CEE1EF;
	border-color: #80B5D0;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	border: none;
	color: #224466;
	cursor: pointer;
	float: right;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	font-size: 13px;
	margin-top: -6px;
	padding: 3px 5px;
	text-decoration: none; }

	#login form .submit input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }

/* FOOTER FORMULARIO
------------------------------------------------- */
#nav {
	margin: 0 0 0 8px;
	padding: 16px;
	text-align: center; }

.login #nav a { color: #777777; }

/* MENSAJES DE ERROR (FORMULARIO)
------------------------------------------------- */
#login_error {
	background-color: #FFEBE8;
	border-color: #CC0000;
	border-style: solid;
	border-width: 1px;
	margin: 0 0 13px 8px;
	padding: 8px; }

        )

    [1] => Array
        (
            [0] => .login
        )

    [2] => Array
        (
            [0] =>  #borde-top a:hover 
        )

    [3] => Array
        (
            [0] =>  color: #000; }

/* TITULO PRINCIPAL (LOGO)
------------------------------------------------- */
h1 {
	background: url(../imagenes/header/logo-acceso-panel.png) no-repeat;
	display: block;
	height: 40px;
	margin-left: 15px;
	overflow: hidden;
	padding-bottom: 15px;
	text-indent: -9999px;
	width: 320px; }

/* FORMULARIO
------------------------------------------------- */
form {
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
	margin-left: 8px;
	padding: 16px 16px 40px 16px; }

	form p { margin-bottom: 24px; }

/* Tamaño del recuadro */
#login {
	margin: 7em auto;
	width: 350px; }

/* Tamaño de las casillas USER Y PASS */
#user_pass, #user_login {
	font-size: 20px;
	margin-right: 6px;
	padding: 3px;
	width: 97%; }

/* Color texto input */
#login form input { color: #555555; }

/* Color de fondo LOGIN (azul claro) */
.login form { background-color: #eee; }

/* CASILLA >> RECORDARME
------------------------------------------------- */
form .forgetmenot {
	float: left;
	font-weight: normal;
	margin-bottom: 0;
	margin-left: 2px; }

/* BOTON >> INICIAR SESIÓN
------------------------------------------------- */
#login form .submit input {
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #CEE1EF;
	border-color: #80B5D0;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	border: none;
	color: #224466;
	cursor: pointer;
	float: right;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	font-size: 13px;
	margin-top: -6px;
	padding: 3px 5px;
	text-decoration: none; }

	#login form .submit input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }

/* FOOTER FORMULARIO
------------------------------------------------- */
#nav {
	margin: 0 0 0 8px;
	padding: 16px;
	text-align: center; }

.login #nav a { color: #777777; }

/* MENSAJES DE ERROR (FORMULARIO)
------------------------------------------------- */
#login_error {
	background-color: #FFEBE8;
	border-color: #CC0000;
	border-style: solid;
	border-width: 1px;
	margin: 0 0 13px 8px;
	padding: 8px; }

        )

)
</pre>

Qué es lo que hago mal?

[pateketrueke]

es que usas expresiones muy endebles... debes reflexionar mas lo que necesitas, y entonces aplicar tu criterio...

.login #borde-top a:hover{color:#000;}
.login form{background-color:#eee;}
.login #nav a { color: #777777; }

si dices que mas-o-menos es así la estructura deberías ser un poco así la expresión:

/\.login\s*\{[^\}]+\}/

[neodani]

Iniciado por pateketrueke

es que usas expresiones muy endebles... debes reflexionar mas lo que necesitas, y entonces aplicar tu criterio...



si dices que mas-o-menos es así la estructura deberías ser un poco así la expresión:

Gracias de nuevo por tus comentarios pateketrueke!!

Si la aplico con o sin poner /is no me da ningun resultado.

Analizando tu expresion me aventuro a decir que hace lo siguiente, corrígeme si me equivoco por favor :)

Todo lo que empiece por .login
seguido por 0 ó mas espacios
una llave abierta {
que no contenga }
seguido de 1 o más llaves cerradas }

Código PHP:

  preg_match_all('/\.login\s*\{[^\}]+\}/is',$css,$matches); 
   

Código:

<pre>Array
(
    [0] => Array
        (
        )

)
</pre>

Gracias de antemano!

[pateketrueke]

jeje.. es cierto, me falto lo que puede haber entre .login y el primer {

Código PHP:

  $str = '.login #borde-top a:hover{color:#000;}
.login form{background-color:#eee;}
.login #nav a { color: #777777; }';
 
preg_match_all('/\.login\s*[#\s\w:-]*\{[^\}]*\}/is', $str, $matches);
var_dump($matches); 
   

[neodani]

Iniciado por pateketrueke

jeje.. es cierto, me falto lo que puede haber entre .login y el primer {

Código PHP:

  $str = '.login #borde-top a:hover{color:#000;}
.login form{background-color:#eee;}
.login #nav a { color: #777777; }';
 
preg_match_all('/\.login\s*[#\s\w:-]*\{[^\}]*\}/is', $str, $matches);
var_dump($matches); 
   

Ahora sí! gracias pateketrueke, tremendo.

Intento mejorarlo :P, en el caso que no empiece por .login sino que puede que empiece pero no puede que no...

Ejemplo:

Código CSS:

#myform form .login input:hover {
    background-color: #9ACBEF;
    border-color: #328AB2;
    color: #FFF; }
 

Entiendo que la clave está en el primer \.login

Si para indicar uno u otro es con la tubería |
Y los claudators [ ] indican un rango, pienso que algo así quedaría feo, ya lo he probado y no funcionó

[\.login | \w*\s* \.login]

[ [\.login] | [ [\w\s]*\.login] ]

Luego llegué a una versión más reducida

[\.login | ^\.login]

Y este mi ultimo intento razonando más aún si cabe!

Si esto es que no empiece con .login [^\.login]
Y esto es que puede tener estos caracteres 0 o más veces [#\s\w:-]*

[#\s\w:-]*\.login

Qué te parece la expresión y el resultado? Me aparece espacios o saltos de linea al comienzo de los arrays [0] => [1] => [2] =>

Código PHP:

  preg_match_all('/[#\s\w:-]*\.login\s*[#\s\w:-]*\{[^\}]*\}/is',$css,$matches); 
   

Resultado

Código:

Array
(
    [0] => Array
        (
            [0] => 

.login #borde-top a:hover { color: #000; }
            [1] => 
.login form { background-color: #eee; }
            [2] => 

.login #nav a { color: #777777;
color: #777777;
color: #777777;
 }
            [3] => 
#myform form .login input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }
        )

)

[pateketrueke]

las corchetes cuadrados... [] descomponen las frases dentro de ellos en sus componentes, osea... en sus caracteres

por ende, si colocas una frase completa ahí no funcionará como piensas... es por ello, que no se usan para agrupar patrones, se utilizan para descomponer una frase en opciones...

por eso [0-9] es algún numero del cero al nueve... pero [foo] no quiere decir que captura "foo", mas bien capturaría todo lo que contenga alguna de dichas letras...

igualmente, la negación se hace a nivel carácter... no por frases, osea pensar que [^\.login] niega toda la frase es un error...


--
lo de tu expresión, es natural... ya que los caracteres especiales dentro de los corchetes [#\s\w:-] hay un espacio, y por lógica... lo captura (:

[neodani]

Iniciado por pateketrueke

las corchetes cuadrados... [] descomponen las frases dentro de ellos en sus componentes, osea... en sus caracteres

por ende, si colocas una frase completa ahí no funcionará como piensas... es por ello, que no se usan para agrupar patrones, se utilizan para descomponer una frase en opciones...

por eso [0-9] es algún numero del cero al nueve... pero [foo] no quiere decir que captura "foo", mas bien capturaría todo lo que contenga alguna de dichas letras...

igualmente, la negación se hace a nivel carácter... no por frases, osea pensar que [^\.login] niega toda la frase es un error...


--
lo de tu expresión, es natural... ya que los caracteres especiales dentro de los corchetes [#\s\w:-] hay un espacio, y por lógica... lo captura (:

Ajam, para negar frases o palabras se utilizaría algo así, sino estoy equivocado

(?!\.login)

Salu2!

[Hidek1]

con eso le dices que no lo siga una expresion.. ejemplo

foo(?!bar) coincide con todos los foo que no terminen con bar
si quieres que no encuentre una palabra seria
([^foo]) asi coincide con todo lo que no sea foo

saludos!

[pateketrueke]

Iniciado por Hidek1

[...] ([^foo]) asi coincide con todo lo que no sea foo [...]

por favor, lee por favor lo que puse anteriormente...

los [] no niegan frases, descomponen la frase en caracteres y niegan individualmente su composición...

[neodani]

Buenas,

Tengo un problema con una expresión.

Si tienes el siguiente fragmento, y quieres sacar solo las propiedades que coincidan literalmente con #login

Código CSS:

#login form .submit input:hover {
background-color: #9ACBEF;
border-color: #328AB2;
color: #FFF; }
 
h1 #prueba, h2 #login {border:0px;
color:red;
}
 
#login_error {
    background-color: #FFEBE8;
    border-color: #CC0000;
    border-style: solid;
    border-width: 1px;
    margin: 0 0 13px 8px;
    padding: 8px; }
 
#user_pass, #user_login {font-size: 20px;
    margin-right: 6px;
    padding: 3px;
    width: 97%; }
 

Debería sacar la primera

#login form .submit input:hover {
background-color: #9ACBEF;
border-color: #328AB2;
color: #FFF; }

Y la segunda, incluso el h2 ya que pertenece a #login
h2 #login {border:0px;
color:red;
}

Las otras contienen la palabra #login pero no son válidas.

Cómo lo haríais?

Yo lo he intentado así, pero pilla el #login_error, no he conseguido decirle que no lo coja a pesar de tener la palabra #login. Tampoco el h2 he podido extraerlo sin perder el resto de la expresión regular.

Así me pilla el h2 pero solo ese.

Código PHP:

preg_match_all("/([\,\w]+[\s]*#login\s*[^\}]*\{[^}]*\})/is",$css,$matches);
 

Asi me coge el #login_error y no muestra el h2

Código PHP:

preg_match_all("/([\,\w]*#login\s*[^\}]*\{[^}]*\})/is",$css,$matches);
 

Código:

#login form .submit input:hover {
background-color: #9ACBEF;
border-color: #328AB2;
color: #FFF; }

#login {border:0px;
color:red;
}

#login_error {
	background-color: #FFEBE8;
	border-color: #CC0000;
	border-style: solid;
	border-width: 1px;
	margin: 0 0 13px 8px;
	padding: 8px; }

Muchas gracias de antemano!

[neodani]

Iniciado por neodani

Buenas,

Tengo un problema con una expresión.

Si tienes el siguiente fragmento, y quieres sacar solo las propiedades que coincidan literalmente con #login

Código CSS:

#login form .submit input:hover {
background-color: #9ACBEF;
border-color: #328AB2;
color: #FFF; }
 
h1 #prueba, h2 #login {border:0px;
color:red;
}
 
#login_error {
    background-color: #FFEBE8;
    border-color: #CC0000;
    border-style: solid;
    border-width: 1px;
    margin: 0 0 13px 8px;
    padding: 8px; }
 
#user_pass, #user_login {font-size: 20px;
    margin-right: 6px;
    padding: 3px;
    width: 97%; }
 

Debería sacar la primera

#login form .submit input:hover {
background-color: #9ACBEF;
border-color: #328AB2;
color: #FFF; }

Y la segunda, incluso el h2 ya que pertenece a #login
h2 #login {border:0px;
color:red;
}

Las otras contienen la palabra #login pero no son válidas.

Cómo lo haríais?

Yo lo he intentado así, pero pilla el #login_error, no he conseguido decirle que no lo coja a pesar de tener la palabra #login. Tampoco el h2 he podido extraerlo sin perder el resto de la expresión regular.

Así me pilla el h2 pero solo ese.

Código PHP:

preg_match_all("/([\,\w]+[\s]*#login\s*[^\}]*\{[^}]*\})/is",$css,$matches);
 

Asi me coge el #login_error y no muestra el h2

Código PHP:

preg_match_all("/([\,\w]*#login\s*[^\}]*\{[^}]*\})/is",$css,$matches);
 

Código:

#login form .submit input:hover {
background-color: #9ACBEF;
border-color: #328AB2;
color: #FFF; }

#login {border:0px;
color:red;
}

#login_error {
	background-color: #FFEBE8;
	border-color: #CC0000;
	border-style: solid;
	border-width: 1px;
	margin: 0 0 13px 8px;
	padding: 8px; }

Muchas gracias de antemano!

SOLUCIONADO cambiando la expresión regular por

Código PHP:

preg_match_all("/[\.#\s\w:-]*\#login\s+[\.#\s\w:-]*\{[^\}]*\}/is",$css,$matches);
 

Sin embargo, hay otro fallo

Al seleccionar el estilo #user_pass no se de que forma seleccionarlo, sin que me deje de funcionar la funciones que tiene ahora.

Porque si hago una así, funciona para este caso pero no para #login

Código:

[\.#\s\w:-]*\#user_pass[,]\s+[\.#\s\w:-]*\{[^\}]*\}

Código CSS:

#login {
    margin: 7em auto;
    width: 350px; }
 
/* Tamaño de las casillas USER Y PASS */
#user_pass, #user_login {
    font-size: 20px;
    margin-right: 6px;
    padding: 3px;
    width: 97%; }
 
/* Color texto input */
#login form input { color: #555555; }
 
/* Color de fondo LOGIN (azul claro) */
.login form { background-color: #eee; }
 

Muchas gracias de antemano!