我需要创建一个解析CSS字符串的函数，这将用于内联js样式。
例如:我得到的是类似const styles=“background-color:#ffffff；color:#000000”的内容，我需要转换为:
<h1
className={classes}
style={{ color: fontColor, background: backgroundColor }}
>
{copy}
</h1>
我现在要做的是
const [backgroundColor, setBackgroundColor] = useState();
const [fontColor, setFontColor] = useState();
const colors = styles?.match(/(#)([^;]*)/g);
useEffect(() => {
if (colors) {
if (colors.length > 1) {
setBackgroundColor(colors[0]);
setFontColor(colors[1]);
}
if (colors.length === 1) {
setFontColor(colors[0]);
}
}
}, [colors]);
但是我被要求创建纯粹的seperate函数来解析styles字符串。
所以我想知道是否有一个解决方案，我不需要“regex”每个特定的选择器，然后它的值。如果在冒号之前有任何东西是选择器，而在冒号之后有任何东西是选择器，直到分号是它的值。
有什么提示吗？
谢谢
你可以这样做，然后用它映射你的函数
null
const styles = "background-color:#FFFFFF;color:#000000";
const css = styles.split(';').map(cur => cur.split(':'));
console.log(css);
可能是这样的（将css字符串转换为对象）:
const convertCssToObject = value => {
const regex = /(?<=^|;)\s*([^:]+)\s*:\s*([^;]+)\s*/g, o = {};
value.replace(regex, (m,p,v) => o[p] = v);
return o;
}
console.log( convertCssToObject("background-color:#FFFFFF;color:#000000;") )
