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

更新小提琴：http://jsfiddle.net/71eyg9gv/10/

Answer 2

虽然我不是Javascript正则表达式中最好的东西，但这是我的小提琴：

http://jsfiddle.net/71eyg9gv/4/

基本上我将重复的部分作为一个函数，然后用变量声明它。

function addColor(object) {
    $(".addcolor:contains(" + object +")").html(function(_, html) {
        var re = new RegExp(object,"g");
        return  html.replace(re, '<span class="' + object +'">' + object + '</span>')
    });
}

addColor('red');
addColor('blue');
addColor('green');

如何组合jquery代码与类似的功能？

2 个答案: