Question

this is the html with the text in between brackets:

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

this is what i want to end up with:

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

i tried this:

$('.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;

}

but as you can guess, it doesn’t work 🙁

what am i doing wrong??

Answer 1

Here is a possible readable solution without colors:

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

And with color 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);
});