Javascript function to extract 'unsafe-inline' styles from a HTML string

separateHtmlAndCss.js

export function separateHtmlAndCss(str) {
    const parser = new DOMParser();
    let parsedHtml = parser.parseFromString(str, 'text/html');
    const CLASS_NAME_PREFIX = 'generated-class-name-';
    let html, css = '';

    // handle <style>-Tags
    const styleTags = parsedHtml.querySelectorAll('style');
    if (styleTags.length > 0) {
        for (let i = 0; i < styleTags.length; i++) {
            css = css.concat(styleTags[i].textContent);
            styleTags[i].remove();
        }
    }
    
    // handle style-Attributes <el style="...">
    const elementsWithStyleAttributes = parsedHtml.querySelectorAll('[style]');
    if (elementsWithStyleAttributes.length > 0) {
        for (let i = 0; i < elementsWithStyleAttributes.length; i++) {
            let generatedClassName = CLASS_NAME_PREFIX.concat(i);
            css += `.${generatedClassName} { 
                ${elementsWithStyleAttributes[i].getAttribute('style')} 
            }\n`;
            elementsWithStyleAttributes[i].classList.add(generatedClassName);
            elementsWithStyleAttributes[i].removeAttribute('style');
        }
    }

    // extract the body's innerHTML
    html = parsedHtml.body.innerHTML;
    
    // and return it alongside the extracted CSS
    return { html, css };
}