如何使用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

回答

相關問題