How to extract html style tag into css

Question

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

Answer 1

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);
});