Publicado em 23 de jul.

Converter tags style do html

Olá galera, gostaria de saber se existe algum script que faça isso ou sse não tiver me orientem em como fazer, é assim ele pega o código:

<div style="width:100%height:20px;..."></div
<a style="font-size:12px; font-weight:bold"></a>

le o codigo e cria um css e coloca uma class no lugar do style, então ficaria assim:

<div class="inventadapelophp1"></div>
<a class="inventadapelophp2"></a>

<style>
.inventadapelophp1 {

width:100%height:20px;... }

.inventadapelophp2 {
font-size:12px; font-weight:bold
}

</style>
Existe algum script que já faça isso? se não como poderei fazer?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Kakashi_Hatake· 23 de jul.

Já tentou utilizar ER?

$html = <<<HTML

<div id="post" style="width:100%height:20px;">My div</div>
<a href="[http://www.mysite.com](http://www.mysite.com)" style="font-size:12px; font-weight:bold">Click here</a>
HTML;

$pattern = '(style=["\'][^"\']+["\'])';

$patterns = array(
'/(<div.+)' . $pattern . '/i',
'/(<a.+)' . $pattern . '/i'
);

$replacements = array(
'${1}class="one"',
'${1}class="two"'

);

var_dump( preg_replace( $patterns, $replacements, $html ) );

Saída

<div id="post" class="one">My div</div>
<a href="[http://www.mysite.com](http://www.mysite.com)" class="two">Click here</a>

Rafa Jaques· 23 de jul.

Carlos, acho que na verdade ele queria um script que retirasse os estilos inline e transformasse em um bloco de código de estilos.

Eu montei o script da seguinte maneira (tentei fazer o mais didático possível):

// Seu HTML vai aqui. Pode usar um file_get_contents() também

$html = '<div id="post" style="width:100%height:20px;">My div</div>
<a href="[http://www.mysite.com](http://www.mysite.com)" style="font-size:12px; font-weight:bold">Click here</a>';

// Padrão para leitura de estilos
$pattern = '(style=["\'][^"\']+["\'])';

// Array com os estilos css
$css = array();
// Contagem de estilos criados
$contagem = 1;
// Bloco de código pra saída
$cssLimpo = '';

// Função que recebe os callbacks e trata os valores, armazenando o que é necessário

function montaCss($a) {
	// Acessa as variáveis lá fora
	global $css, $contagem;
	// Inventa um novo nome pra próxima classe
	$classeCss = 'inventado' . $contagem++;
	// Retira o "style" e grava essa classe na nossa lista de novas classes
	$css[$classeCss] = preg_replace('/style=\"(.+)\"/i', '$1', $a[0]);
	// Retorna o que colocar no lugar do antigo style
	return "class=\"{$classeCss}\"";
}

// Aplica a ER com o callback
$htmlLimpo = preg_replace_callback($pattern, 'montaCss', $html);

// Prepara o CSS, transformando o array em bloco de código

foreach ($css as $c => $v)
	$cssLimpo .= "$c { $v } \n";

// Voilá! :)

// Mostra o CSS resultante na tela

echo "<style>\n{$cssLimpo}\n</style>";

// Mostra o HTML resultante na tela
echo $htmlLimpo;
Acho que isso aí resolve o problema! :)

Abraço.

Kakashi_Hatake· 23 de jul.

$html = <<<HTML

<div id="post" style="width:100%;height:20px;">My div</div>
<a href='[http://www.mysite.com'](http://www.mysite.com) style='font-size:12px;font-weight:bold;'>Click here</a>
HTML;

$pattern = '(style=["\'](?P<style>[^"\']+)["\'])';

$patterns = array(
'/(<div.+)' . $pattern . '/i',
'/(<a.+)' . $pattern . '/i'
);

$replacements = array(
'one' => '${1}class="one"',
'two' => '${1}class="two"'

);

preg_match_all( $pattern, $html, $matches );
$class = array_keys( $replacements );
$style = '<style>' . PHP_EOL;

for( $i = 0; $i < count( $matches[ 'style'] ); $i++ )
{

 $style .= '.' . $class[ $i ] . '{' . PHP_EOL;
 $style .= implode( ';' . PHP_EOL, explode( ';', $matches[ 'style' ] [ $i ] ) );
 $style .= '}' . PHP_EOL;
}

$style .= '</style>';
$html = preg_replace( $patterns, $replacements, $html );

var_dump( $html, $style );

Saída

<div id="post" class="one">My div</div>
<a href='[http://www.mysite.com'](http://www.mysite.com) class="two">Click here</a>

<style>
.one{
 width:100%;
 height:20px;
}
.two{
 font-size:12px;
 font-weight:bold;
}
</style>

Vinicius Eduardo_52741· 23 de jul.

Obrigado a todos!, me ajudou bastante!!!