如果我使用 Replace 和 RegExp，我怎样才能恢复到原来的颜色？

Question

我正在开发一个生成器。用户应该单击代表 html 组件的图像，这会将 html 注入文本区域。该模板带有主色（背景、突出显示的文本、链接等）

我创建了一排按钮，让用户更改主颜色（例如 #000000）。

<button class="change black-color" id="black-color">Black</button>    
<button class="change blue-color" id="blue-color">Blue</button>
<button class="change green-color" id="green-color">Green</button> etc....

然后使用 jquery 单击按钮将所有出现的黑色更改为新颜色：

    $("#myDiv button").click(function(){
      var textarea=$('#myTextarea'); 
      if($(this).attr('id') === 'blue-color'){
        textarea.html(textarea.html().replace(new RegExp("#000000","g"),"#d20606")); 
      }else if($(this).attr('id') === 'green-color'){
        textarea.html(textarea.html().replace(new RegExp("#000000","g"),'#ff4c00'));
      }else if($(this).attr('id') === 'light-color'){
        textarea.html(textarea.html().replace(new RegExp("#000000","g"),'#31B7BC'));
      }

等...所有接下来的颜色....

我的问题是：有没有办法缩短函数以使其更具动态性？如何使用 RegExp 恢复为黑色（第一个主要颜色）？？

编辑： 感谢 freedom-m 所有这些代码都可以通过 html 使用数据属性来缩短..但我还有一个问题

如果我有一个十六进制代码数组，我该如何制作以下内容：如果您在文本区域中找到与数组颜色之一相对应的颜色，请将该颜色的所有出现更改为用户单击的按钮（数据颜色）。

例如：

var color =["#64A70B","#525ca3","#d20606","#ff4c00","#61b09d","#00cbf9","#31B7BC","#4EAB8E"];
$(".change").click(function() {
  var colour = $(this).data("color");

  var textarea = $('#myTextarea'); 
   textarea.html(textarea.html().replace(color, colour)); 
  
});

Answer 1

将颜色放在按钮内，而不是代码。然后您可以添加新按钮而无需更改代码

<button class="change" data-color='#000000'>Black</button>    
<button class="change" data-color='#d20606'>Blue</button>
<button class="change" data-color='#ff4c00'>Green</button>

然后

$(".change").click(function() {
  var colour = $(this).data("color");

  var textarea = $('#myTextarea'); 
  textarea.html(textarea.html().replace(/#000000/g, colour)); 
});

要不止一次更改颜色，您可以使用正则表达式，但它可能会出错，这取决于他们在文本区域中放置的其他内容，例如

.replace(/\=\"\#\d{6}\"/g, '="' + colour + '"')

（可能不需要所有的 \escape，但不会造成伤害）

给予

$(".change").click(function() {
  var colour = $(this).data("color");

  var textarea = $('#myTextarea'); 
  textarea.html(textarea.html().replace(/\=\"\#\d{6}\"/g, '="' + colour + '"')); 
});

Answer 2

好的，我设法让一些东西更有活力。我没有使用 Regex.I 创建六进制代码数组。我浏览它，对于文本区域中找到的每种对应颜色，我将其替换为单击按钮注入的颜色。因此，如果有一些 #64A70B 颜色，并且如果我单击 data-color="#525ca3" 按钮，#64A70B 的所有实例都将替换为 #525ca3 等等。

 var color["#64A70B","#525ca3","#d20606","#ff4c00","#61b09d","#00cbf9","#31B7BC","#4EAB8E"];

 $(".change").click(function() { 
  var colour = $(this).data("color");
  var textarea = $('#myTextarea');
  var len = color.length;
  for (i=0; i < len; i++) {
    textarea.html(textarea.html().replaceAll(color[i], colour)); 
  }  
});

也许这段代码可以改进，但它似乎运行良好..谢谢 freedomn-m，你让我走上了正确的方向，但它并没有完全解决我的问题..

如果我使用 Replace 和 RegExp，我怎样才能恢复到原来的颜色？

How can I revert to original color if I use Replace and RegExp?

jquery

textarea

colors