js实现字符串转换为样式对象和样式对象转换为字符串

将字符串转为样式数组对象

const inputString = `

<style> [codev_id="id_3790139"]:hover {display:grid;margin-top:20px;} </style>

<style> [codev_id="id_2346894"] > [codev_id="id_1234567"] {font-size:25px;color:#555;} </style>

<style> [codev_id="id_9758692"] {font-size:14px;color:#999;margin-top:10px;} </style>

<style> [codev_id="id_6314683"] .class-name {font-size:15px;line-height:25px;} </style>

`;

const regex = /<style>\s*([\s\S]*?)\{([\s\S]*?)\}\s*<\/style>/g;

const result = [];

while((match = regex.exec(inputString)) !== null){

    const selector = match[1].trim();

    const stylesString = match[2];

    const styles = stylesString.split(';').filter(s => s.trim() !== '');

    const styleObj = {};

    // 将样式字符串转换为对象

    styles.forEach(style => {

        const [key, value] = style.split(':').map(s => s.trim());

        styleObj[key] = value;

    });

    // 将结果添加到数组中

    result.push({

        selector,

        styles: styleObj

    });

}

console.log(result);

//将样式数组对象转换为字符串

function resultToCssString(result) {

    return result.map(item => {

        // 将样式对象转换回 CSS 字符串

        const stylesString = Object.entries(item.styles).map(([key, value]) => `${key}:${value};`).join(' ');

        // 组合选择器和样式字符串

        return `${item.selector} { ${stylesString} }`;

    }).join('\n'); // 使用换行符分隔每个样式块

}