How to extract html style tag into css

user_13863267 0
Viewed 2507

I'm trying to extract automatically the part of the tag's style from div html. I have 100 style combinations, so doing it manually is not possible. This is the path html style tags --> css

.rule1 { 
  background-color: rgb(196, 0, 143);
}

.rule { 
  background-color: rgb(230, 176, 18);
}
<div class="line line--big line--active" role="button" 
   style="background: rgb(196, 0, 143) none repeat scroll 0% 0%; color: white; opacity: 1;"><span>1</span></div>
<div class="line line--big line--active" role="button"
   style="background: rgb(230, 176, 18) none repeat scroll 0% 0%; color: white; opacity: 1;"><span>5</span></div>

Attention: this question is not duplicate because i don't have in my code the style tag. I already searched for other answers but they zurb link is down now http://zurb.com/ink/inliner.php here you need the style tag: JavaScript Regex to Extract Text from Style HTML Tags and also here: Convert css from html style tag into inline css

tags css styles html
2 Answers

Method 1: extractCSS - Online CSS Extractor

extractCSS is a JavaScript library and an online tool that lets you extract element ID, class and inline styles from HTML document and output them as CSS.

Note : Not exactly what you are looking for but if you don't mind copying and pasting your HTML, try this. Not too many features but it does the job!

http://extractcss.com/

https://github.com/peterlazzarino/Inline-CSS-Extractor

Method 2 : using Jquery :

You can use some JS/JQuery code to extract the styles, clear them, give elements an ID and add up css. Check this example, you may extend it further.

HTML:

<style></style>
<div style="background-color: red; height:300px; width:200px;">
<a style="font-weight: bold">Link</a>
</div>

Jquery

$(document).ready(function(){
    var i = 0;
    var css = "";
    $("div,a").each(function(){
        $(this).attr("id","st-"+i);
        css += "#"+$(this).attr("id")+"{"+$(this).attr("style")+"}";
        $(this).removeAttr("style");
        i++;
    });
    $("style").html(css);
});
user_60768630

If you really need to use simplehtmldom to extract this :

For

<style>
...
</style>

Use :

$css = $html->find('style')->innertext;

For

<div style="background:blue; color:white;"></div>

Use :

$css = $html->find('div[style]')->style;

If there's more than one div with style atribute or more than one <style>, you can use a foreach to loop between them.

To parse styles :

in PHP :

$s = 'background:blue; color:white;';

$results = [];
$styles = explode(';', $s);

foreach ($styles as $style) {
    $properties = explode(':', $style);
    if (2 === count($properties)) {
        $results[trim($properties[0])] = trim($properties[1]);
    }
}

var_dump($results);

in JS

let s = 'background:blue; color:white;';

let results = {};
let styles = s.split(";");

for (let style in styles) {
    let properties = styles[style].split(":");
  if (properties.length === 2) {
    results[properties[0].trim()] = properties[1].trim();
  }
}

console.log(results);

https://jsfiddle.net/zyfhtwj2/

user_60768630
Related