Je souhaite combiner deux tableaux avec des propriétés css en un seul nouveau. Les nouvelles valeurs doivent écraser les anciennes valeurs si ce style était déjà défini.

Le premier tableau contient les anciens styles (il vient des classes css)

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

Le deuxième tableau contient les nouveaux styles )il vient de css-inlinestyle)

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

Pour les styles testés (bordure, police, couleur, etc.), cette fonction fonctionne bien. Cette fonction fait partie d'une boucle à travers tous les éléments qui ont des propriétés de style en ligne.

...
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}`);
...

Dans le cas de la propriété background-image, cette fonction a échoué.

Je reçois : background-image: url("https;} à la place le recherché background-image: url("https://www.example.com/newfile.jpg");}

Qu'est-ce que je dois changer, avec lequel ça marche aussi dans ce cas ?

Merci beaucoup!

-1
Greg 15 mars 2019 à 13:24

2 réponses

Meilleure réponse

Vous devez supprimer le ?, car il correspondra entre 0 et 1 du jeton précédent.

Donc, votre regex devrait ressembler à ceci : str.split(/: /);

1
Marvin Klar 15 mars 2019 à 10:31

Le problème réside dans la manière dont vous générez la paire clé/valeur. Au lieu d'une simple division, qui se divise à chaque deux-points, je suggérerais de l'exécuter via une expression régulière :

const [full, key, value] = /^([^:]*):(.*)$/.exec(str)
0
Michał Sadowski 15 mars 2019 à 10:31