CODEWITHSUNDEEP
jqueryimagereplacecharacter
aklein
aklein

Reputation: 81

Replace multiple characters with images in Jquery

I have a little problem - i want to replace the characters "K" and "k" against images in a H1 Element.

I've tried this and it works pretty nice for one character:

$(function() {
    $("h1").each(function() { 
        if($(this).children().length==0) { 
            $(this).html($(this).text().replace('K', '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">'));
        } 
    });
});

This one worked pretty well for the capital "K", but now I allso want to replace the lower one - so I tried this:

$(function() {
    $("h1").each(function() { 
        if($(this).children().length==0) { 
            $(this).html($(this).text().replace('K', '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">').replace('k', '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_low.png" style="display:inline-block;" alt="k">'));
        } 
    });
});

The result finaly looked a little creepy - something like this:

furt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">ontakt & Terminvereinbarung

But it should more look like this with replaced characters:

Kontakt & Terminvereinbarung

I'm pretty sure i've made a mistake, an idiotic maybe, but where?

Thanks a lot for your help!

Upvotes: 0

Views: 583

Answers (3)

Barmar
Barmar

Reputation: 780984

Use string.replace with a function as a second argument. This receives the match as an argument, and returns the value to replace it with. This allows you to do it all in one pass, so you don't reprocess the output of the first pass.

str.replace(/k/ig, function(char) {
    switch(char) {
        case 'K':
           return '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">';
           break;
        case 'k':
           return '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_low.png" style="display:inline-block;" alt="k">';
           break;
     }
});

You also need to use a regular expression with the g modifier to replace all the instances. When you use a string, or a regexp without g, it just does one replacement.

Upvotes: 2

WhyMe
WhyMe

Reputation: 535

You are also replacing the inner letters of the HTML code with k and K, do The following.

str=[your string].replace('K', '!!__Big__!!').replace('k', '!!__Small__!!');
str=str.replace("!!__Big__!!", "[code here]").replace("!!__Small__!!","[Code here]");

Upvotes: -1

Chris S.
Chris S.

Reputation: 1257

You seem to also replace the "k"s from the inside of your image tag, e.g. fran*k*furt. You could first off replace all capital K's by "UPPERREP" and all lower ones by "LOWERREP" and then replace either by images. This way you would avoid wrecking, replacing or entirely getting rid of your first image element when adding the second one.

Upvotes: 0

Related Questions