JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button" onclick="div2html('div2save')">Save HTML</button>
<br>
<br>
<div style="border: 1px solid">
<div id="div2save">
<p class="bigbold">bigbold</p>
<div id "innerDiv">
<p class="bigbold">bigbold</p>
<p class="bigbold2">bigbold2</p>
</div>
</div>
</div>
CSS
.somecss {
font-size: 100px;
}
.bigbold {
font-weight: bold;
font-size: 20px;
}
.bigbold2 {
font-weight: bold;
font-size: 25px;
}
JavaScript
function div2html(divId) {
var html = document.getElementById(divId).innerHTML;
// get all css classes in html
var cssClasses = [];
var classRegexp = /class=['"](.*?)['"]/g;
while ((m = classRegexp.exec(html))) cssClasses = cssClasses.concat(cssClasses, m[1].split(" "));
// filter non unique or empty cssClasses
cssClasses = cssClasses.filter(function (item, pos, self) {
return item && self.indexOf(item) == pos;
});
// get html of classes
var cssHtml = '';
for (var i = 0; i < cssClasses.length; i++) cssHtml += getRule('.' + cssClasses[i]);
// assemble html
var html = "<html><head><style>" + cssHtml + "</style></head><body>" + html + "</body></html>";
console.log(html);
saveTextAsFile("div2html.html", html);
}
function getRule(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for (var i = 0; i < styleSheetsLength; i++) {
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes) continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
var ret;
if (classes[x].cssText) {
ret = classes[x].cssText;
} else {
ret = classes[x].style.cssText;
}
if (ret.indexOf(classes[x].selectorText) == -1) {
ret = classes[x].selectorText + "{" + ret + "}";
}
return ret;
}
}
}
}
function saveTextAsFile(fileNameToSaveAs, textToWrite) {
var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
ieEDGE = navigator.userAgent.match(/Edge/g),
ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
if (ie &&...