jquery - 如何将具有相似功能的 jquery 代码结合起来？

Question

是否可以减少代码或重新创建具有相同功能的类似代码:Fiddle here .谢谢

$(".addcolor:contains('red')").html(function(_, html) {
   return  html.replace(/(red)/g, '<span class="red">$1</span>')
});
$(".addcolor:contains('blue')").html(function(_, html) {
   return  html.replace(/(blue)/g, '<span class="blue">$1</span>')
});
$(".addcolor:contains('green')").html(function(_, html) {
   return  html.replace(/(green)/g, '<span class="green">$1</span>')
});

代码的作用是用 span 替换特定的文本。如何直接使用 jquery 代码应用 css？

Answer 1

使用数组存储所有颜色值并创建正则表达式:

var arr = ['red','green','blue'];

for(i=0;i<arr.length;i++){
$(".addcolor").html(function(_, html) {

    var regex = new RegExp("("+arr[i]+")","g");
    htmla = '<span class="'+arr[i]+'">$1</span>';

   return  html.replace(regex, htmla);
});
}

更新 fiddle :http://jsfiddle.net/71eyg9gv/10/