Comment modifier dynamiquement les couleurs dans un champs textarea

Comment modifier dynamiquement des élements à l’intérieur d’un champ textarea ?

Vous avez un champ textarea vide (ou pas). De manière dynamique, grâce au js, vous injectez du code à l’intérieur de ce champs texte. Ce texte contient entre autre, des couleurs ou une couleur dominante pour les titres, les phrases en gras, les bordures, les couleurs d’arrière plan etc. Vous souhaiteriez, par l’intermédiaire de boutons, modifier les codes couleurs contenus dans le code : voici une solution.

La partie html

Commencez par définir vos boutons puis votre champ texte:

<div class="button-row">
	<button type="button" class="change product--color-a" id="productA" data-color="#525ca3">product A</button>
	<button type="button" class="change product--color-b" id="productB" data-color="#633bb0">product B</button>
	<button type="button" class="change product--color-c" id="productC" data-color="#31B7BC">product C</button>
	<button type="button" class="change product--color-d" id="productD" data-color="#4EAB8E">product D</button>
	<button type="button" class="change product--color-e" id="productE" data-color="#ff4c00">product E</button>
	<button type="button" class="change product--color-f" id="productF" data-color="#61b09d">product F</button>
	<button type="button" class="change product--color-g" id="productG" data-color="#64A70B">product G</button>
	<button type="button" class="change product--color-h" id="productH" data-color="#00cbf9">product H</button>
</div>

<fieldset>
	<label for="final-code" aria-hidden="true"></label>
	<textarea id="final-code" name="message"></textarea>
</fieldset>

on définit ici un attribut data-color par bouton. On définit un set de couleur pour tous les « produits » (ou n’importe quel autre objet). Chaque bouton correspond à un produit, une marque et représente une couleur. La couleur dominante dans le champs textarea figure elle aussi dans l’attribut data-color d’un bouton. Ca c’est pour pouvoir revenir à la couleur initiale.

Intéragir avec le champ texte

Grâce au js on va procéder de la manière suivante :
On insère tous nos codes couleurs dans une variable « color« .
Au clic sur le bouton :

• on définit dans une variable « colour »  la couleur de l’élément cliqué
• on définit dans une variable « textarea » notre champ texte
• on définit la taille de notre tableau de couleur

on boucle :

• pour chaque couleur contenue dans le tableau
• si une couleur du champ textarea correspond à l’une des couleurs de notre tableau
• on remplace cette couleur par le data-color du bouton cliqué.

 var color =["#64A70B","#525ca3","#633bb0","#ff4c00","#61b09d","#00cbf9","#31B7BC","#4EAB8E"];
 $(".change").click(function() { 
  var colour = $(this).data("color");
  var textarea = $('#final-code');
  var len = color.length;
  for (i=0; i < len; i++) {
   textarea.html(textarea.html().replaceAll(color[i], colour)); 
 }  
});