Replace multiple characters with images in Jquery

Question

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!

Barmar · Accepted Answer · 2013-05-27 00:13:30Z

2

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.

answered May 27, 2013 at 0:13

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris S. · Accepted Answer · 2013-05-27 00:06:31Z

0

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.

answered May 27, 2013 at 0:06

Chris S.

1,25712 silver badges25 bronze badges

Comments

WhyMe · Accepted Answer · 2013-05-27 00:08:57Z

-1

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]");

answered May 27, 2013 at 0:08

WhyMe

5352 silver badges13 bronze badges

1 Comment

WhyMe Over a year ago

That should work as long as you dont have the texts !!__Big__!! and !!__Small__!! in your code. :)

Collectives™ on Stack Overflow

Replace multiple characters with images in Jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related