how to replace text in between brackets with html using jquery?

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

Answer 2

Your code is almost correct; the following piece isn't working the way you expect it to:

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

The problem is that this inside of that each call is just an object that you're turning into a jQuery object. replaceWith isn't actually replacing the html that that object came from.

You should probably build up an HTML string as you go and use html to set the contents at the end:

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

Example: http://jsfiddle.net/zWbkj/

Answer 3

It's because when you are inside the .each loop, $(this) is no longer the $('.someClass'). Set a variable to the jQuery object earlier in scope, and reference that:

http://pastie.org/2095747

Keep in mind though, the code still loops through and re-replaces it each time. Youll need to adjust it to get the content again each time in the loop from the element.

Answer 4

Here's an example that works: http://jsfiddle.net/sharat87/v5Lqm/

The problem with your code is that in the .each call, I don't think the this refers neither to a DOM element, nor to a selector, not a valid one at least. So, what you are effectively doing is this

$('Ks').replaceWith...

Now, jQuery can't find any elements with the Ks tag, as they don't exist and so nothing happens. jQuery doesn't complain when you operate on 0 elements.

Study the code in the jsfiddle example I provided above, let me know if you have any more doubts :)