如何使用jquery替换HTML中括号内的文本？

这是在括号与文本的HTML：如何使用jquery替换HTML中括号内的文本？

<div class="someClass" style="width: 100%; ">Dealing flop: [Ks, 5c, 8h]</div>

这是我想结束了：

<div class="someClass" style="width: 100%; ">Dealing flop: [<span style='color: #000;>K♠</span>, <span style='color: #000;>5♣</span>, <span style='color: #f00;>8♥</span>]</div>

我想这：

$('.someClass').each(function(){ 
    $(this).addClass("km_done"); 
    var tt = $(this).html(); 
    if(tt.indexOf("[")!=-1){ 
     var cards = tt.slice(tt.indexOf("[")+1 ,tt.indexOf("]")).split(", "); 
     $.each(cards,function(id,val){ 
      $(this).replaceWith(tt.replace(val,getColor(val))) 
     }); 
    } 
}); 
getColor = function(str){ 
var col; 
switch(str.charAt(1)){ 
    case "h": col = "<span style='color: red; font-weight:bold;'>"+str.charAt(0)+"♥</span>"; 
    break; 
    case "d": col = "<span style='color: red; font-weight:bold;'>"+str.charAt(0)+"♦</span>"; 
    break; 
    case "s": col = "<span style='color: black; font-weight:bold;'>"+str.charAt(0)+"♠</span>"; 
    break; 
    case "c": col = "<span style='color: black; font-weight:bold;'>"+str.charAt(0)+"♣</span>"; 
    break; 
    default: col = "exception getColor > "+str; 
} 
return col;

}

但你可以猜到，它不起作用:(

我在做什么错？

来源

2011-06-20 plastic cloud

谢谢大家的答案！因为我只能选择一个，所以我选择了那个有漂亮正则表达式的那个。 :) –

Here是没有颜色的可能可读的解决方案：

$(function() { 
    var text = $("div").text(); 
    var replaced = text.replace(/\[(.*)\]/, function($0, $1) { 
     return $1.replace(/(.)([hdsc])/g, function($0, $1, $2) { 
      switch($2) { 
       case "h": 
        return $1.concat("♥"); 
       case "d": 
        return $1.concat("♦"); 
       case "s": 
        return $1.concat("♠"); 
       case "c": 
        return $1.concat("♣"); 
       default: 
        return $1; 
      } 
     }); 
    }); 

    $("div").text(replaced); 
});

而且颜色here ：

$(function() { 
    var text = $("div").text(); 
    var replaced = text.replace(/\[(.*)\]/, function($0, $1) { 
     return $1.replace(/(.)([hdsc])/g, function($0, $1, $2) { 
      switch($2) { 
       case "h": 
        return "<span style='color: red;'>".concat($1, "♥", "</span>"); 
       case "d": 
        return "<span style='color: red;'>".concat($1, "♦", "</span>"); 
       case "s": 
        return "<span style='color: black;'>".concat($1, "♠", "</span>"); 
       case "c": 
        return "<span style='color: black;'>".concat($1, "♣", "</span>"); 
       default: 
        return $1; 
      } 
     }); 
    }); 

    $("div").html(replaced); 
});

来源

2011-06-20 12:49:24

你的代码几乎是正确的;下面这段不工作，你期望它的方式：

$.each(cards,function(id,val){ 
    $(this).replaceWith(tt.replace(val,getColor(val))) 
});

的问题是，this是each电话里面就是，你变成一个jQuery对象的对象。 replaceWith实际上并不代替该对象来自的html。

你或许应该建立一个HTML字符串作为你去使用html在结束时设置的内容：

$('.someClass').each(function() { 
    $(this).addClass("km_done"); 
    var tt = $(this).html(); 
    if (tt.indexOf("[") != -1) { 
     var cards = tt.slice(tt.indexOf("[") + 1, tt.indexOf("]")).split(", "); 
     var result = ''; 

     $.each(cards, function(id, val) { 
      tt = (tt.replace(val, getColor(val))); 
     }); 

     $(this).html(tt); 
    } 
});

例子：http://jsfiddle.net/zWbkj/

来源

2011-06-20 12:46:37

这是因为当你的。每个环内，$（this）不再是$（'。someClass'）。设置一个变量前面范围jQuery对象，并说明：

http://pastie.org/2095747

但请记住，该代码仍然遍历每一次重新替换它。您需要对其进行调整，以便每次从元素的循环中获取内容。

来源

2011-06-20 12:47:07 agmcleod

这里有一个工作的例子：http://jsfiddle.net/sharat87/v5Lqm/

与您的代码的问题是，在.each电话，我不认为this是指既不是一个DOM元素，也不是一个选择，不是一个有效的至少。所以，你是切实做好本

$('Ks').replaceWith...

现在，jQuery的不能找到与Ks标签的任何元素，因为它们不存在，因此没有任何反应。当你对0个元素进行操作时，jQuery不会抱怨。

研究我上面提供的例子的jsfiddle的代码，让我知道，如果您有任何疑虑更多:)

来源

2011-06-20 12:47:36

回答

相关问题