Question

我想将两个带有css-properties的数组合并为一个新数组。如果已经定义了此样式，则新值应覆盖旧值。

第一个数组包含旧样式（来自css-classes）

oldcss[0]='background-image: url(\"https://www.example.com/oldfile.jpg\")';
...

第二个数组包含新样式）（它来自css-inlinestyle）

newcss[0]='background-image: url(\"https://www.example.com/newfile.jpg\")';
...

对于测试的样式（边框，字体，颜色等），此功能可以正常工作。此功能是循环访问所有具有内联样式属性的元素的一部分。

...
const resultObj = [...oldcss, ...newcss].reduce((a, str) => {
      const [key, val] = str.split(/: ?/);
      a[key] = val;
      return a;   }, {});
finalCSS['perfix-'+$(checkEl[i]).attr('id')]=Object.entries(resultObj).map(([key, value]) => `${key}: ${value}`);
...

如果有背景图像属性，此功能将失败。

我收到：background-image: url("https;} 而是想要的background-image: url("https://www.example.com/newfile.jpg");}

在这种情况下，我还必须更改哪些功能？

非常感谢！

Answer 1

您必须删除?，因为它会与前面标记的0和1之间匹配。

因此您的正则表达式应如下所示：str.split(/: /);

Answer 2

问题在于如何生成键/值对。我建议不要通过正则表达式运行它，而不是在每个冒号处进行简单的拆分：

const [full, key, value] = /^([^:]*):(.*)$/.exec(str)

比较两个具有css-properties的数组

2 个答案: