JS : Remplacer toutes les valeurs de chaîne d'un objet qui correspondent à un motif ?

Question

Je cherche un moyen efficace de remplacer les valeurs d'un objet si elles correspondent à un certain modèle.

var shapes = {
  square: {
    attr: {
      stroke: '###',
      'stroke-width': '%%%'
    }
  },
  circle: {
    attr: {
      fill: '###',
      'stroke-width': '%%%'
    }
  }
}

Par exemple, j'aimerais pouvoir remplacer tous les motifs '###' par une couleur correspondant à une forme spécifique :

var square = replace(shapes.square, {
  '###': '#333',
  '%%%': 23
});

var circle = replace(shapes.circle, {
  '###': '#111',
  '%%%': 5
});

Ce qui me permettrait de définir rapidement les valeurs de trait et/ou de remplissage de divers objets.

Existe-t-il un moyen de faire cela proprement ? Peut-être en utilisant Lodash ou regex ?

Answer 1

Dans lodash, vous avez une fonction utilitaire mapValues

function replaceStringsInObject(obj, findStr, replaceStr) {
  return _.mapValues(obj, function(value){
    if(_.isString(value)){
      return value.replace(RegEx(findStr, 'gi'), replaceStr);
    } else if(_.isObject(value)){
      return replaceStringInObject(value, findStr, replaceStr);
    } else {
      return value;
    }
  });
}

Answer 2

JS simple, aucune bibliothèque n'est nécessaire :

var shapes = {
  square: {
    attr: {
      stroke: '###',
      'stroke-width': '%%%'
    }
  },
  circle: {
    attr: {
      fill: '###',
      'stroke-width': '%%%'
    }
  }
}
shapes = JSON.parse(
  JSON.stringify(shapes).replace(/###/g,"red").replace(/%%%/g,"23")
)
console.log(shapes);

Answer 3

Le JavaScript String.prototype.replace() L'API devrait vous permettre de faire exactement cela !

Il faut d'abord parcourir les propriétés de l'objet, mais cela devrait être assez trivial.

Answer 4

Vous pouvez utiliser _.transform afin de remplacer la valeur de l'attribut par celle transmise dans l'objet des remplacements. Si la valeur ne figure pas dans les remplacements, la valeur originale est utilisée.

function replace(src, repl) {
  return {
    attr: _.transform(src.attr, function(result, val, key) {
      result[key] = repl[val] || val;
    }, {})
  };
}

var shapes = {
  square: {
    attr: {
      stroke: '###',
      'stroke-width': '%%%'
    }
  },
  circle: {
    attr: {
      fill: '###',
      'stroke-width': '%%%'
    }
  }
};

var square = replace(shapes.square, {
  '###': '#333',
  '%%%': 23
});

var circle = replace(shapes.circle, {
  '###': '#111',
  '%%%': 5
});

console.log(square);
console.log(circle);

<script src="https://cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js"></script>