Question

这是带括号之间文字的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;

}

但正如你猜测的那样，它不起作用：（

我做错了什么？

Answer 1

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

Answer 2

你的代码几乎是正确的;以下作品不按您期望的方式工作：

$.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/

Answer 3

这是因为当你进入.each循环时，$（this）不再是$（'。someClass'）。在范围的早期将变量设置为jQuery对象，并引用：

http://pastie.org/2095747

请记住，代码仍会循环并每次重新替换它。你需要调整它以便每次在元素的循环中再次获取内容。

Answer 4

以下是一个有效的示例：http://jsfiddle.net/sharat87/v5Lqm/

您的代码存在的问题是，在.each调用中，我认为this既不是指DOM元素，也不是指选择器，至少不是有效的选择器。那么，你实际做的是这个

$('Ks').replaceWith...

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

在我上面提供的jsfiddle示例中研究代码，如果您有任何疑问，请告诉我:)）

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

4 个答案: