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

这是包含括号中文本的html：

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

交易失败：[Ks，5c，8h]

这就是我想要的结局：

<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>

---

交易失败：[5♣,  您的代码几乎是正确的；下面的代码没有按照您期望的方式工作：

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

问题是，
this
在该
调用的内部，每个
调用都只是一个对象，您正在将其转换为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);
    }
});

示例：
您的代码几乎是正确的；下面的代码没有按照您期望的方式工作：

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

问题是，
this
在该
调用的内部，每个
调用都只是一个对象，您正在将其转换为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);
    }
});

示例：
这是因为当您在.each循环中时，$（this）不再是$（'.someClass'）。在范围的前面为jQuery对象设置一个变量，并引用：


但是请记住，代码仍然会循环并每次重新替换它。您需要调整它，以便每次从元素中获取循环中的内容。
这是因为当您在.each循环中时，$（this）不再是$（'.someClass'）。在范围的前面为jQuery对象设置一个变量，并引用该变量：


但是请记住，代码仍然循环并每次重新替换。您需要调整它，以便每次从元素循环中再次获取内容。
以下是一个有效的示例：

代码的问题在于，在
调用中，我认为
this
既不引用DOM元素，也不引用选择器，至少它不是一个有效的选择器。因此，有效的做法是

$('Ks').replaceWith...

现在，jQuery找不到任何带有
Ks
标记的元素，因为它们不存在，所以什么也没发生。当您对0个元素进行操作时，jQuery不会抱怨

研究我上面提供的JSFIDLE示例中的代码，如果您还有任何疑问，请告诉我：）
下面是一个有效的示例：

代码的问题在于，在
调用中，我认为
this
既不引用DOM元素，也不引用选择器，至少它不是一个有效的选择器。因此，有效的做法是

$('Ks').replaceWith...

现在，jQuery找不到任何带有
Ks
标记的元素，因为它们不存在，所以什么也没发生。当您对0个元素进行操作时，jQuery不会抱怨

研究我上面提供的JSFIDLE示例中的代码，如果您还有任何疑问，请告诉我：）
是一种可能的无颜色可读解决方案：

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

和颜色：

$（函数（）{
var text=$（“div”）.text（）；
var replaced=text.replace（/\[（.*）\]/，函数（$0，$1）{
返回$1。替换（/（（[hdsc]）/g，函数（$0，$1，$2）{
交换机（2美元）{
案例“h”：
返回“.concat（$1，”♥", "");
案例“d”：
返回“.concat（$1，”♦", "");
案例“s”：
返回“.concat（$1，”♠", "");
案例“c”：
返回“.concat（$1，”♣", "");
违约：
退还$1；
}
});
});
$（“div”）.html（已替换）；
});
是一种可能的无颜色可读解决方案：

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

和颜色：

$（函数（）{
var text=$（“div”）.text（）；
var replaced=text.replace（/\[（.*）\]/，函数（$0，$1）{
返回$1。替换（/（（[hdsc]）/g，函数（$0，$1，$2）{
交换机（2美元）{
案例“h”：
返回“.concat（$1，”♥", "");
案例“d”：
返回“.concat（$1，”♦", "");
案例“s”：
返回“.concat（$1，”♠", "");
案例“c”：
返回“.concat（$1，”♣", "");
违约：
退还$1；
}
});
});
$（“div”）.html（已替换）；
});
谢谢大家的答案！！因为我只能选择一个，所以我选择了一个有漂亮正则表达式的。：）谢谢大家的答案！！因为我只能选择一个，所以我选择了一个有漂亮正则表达式的。：）