Inserting smilies into div with jQuery

I'm working on some small chat application. I want to implement smilies over there so when i click on some smiley it will appear in textarea where user enters his message and when user clicks on select i want smilies to appear in div that contains the conversation.

After some workarounds i got to idea that replacing textarea with div contenteditable="true" doesn't work that well so i did wrap certain smiley name with ':' like :wink: in textarea but still i need to replace :wink: with real span containing image as background.

Problem is i don't see a way to 开发者_如何学编程make this dynamically but doing each one by one.

for example:

        if ($('.line:contains(":wink:")').length > 0) {
            var oldLineHTML = $('.line:contains(":wink:")').html();
            $('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));

I have plenty of smilies so doing this very resource expensive function will costs me much and also will cause me lots of problems during maintenance.

How can i do that dynamically? Or maybe you have better solution which will require to re-design... I'm up to it if it is required.

thanks }

---

var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));

---

My suggestion is read every string that is wrapped by colons :[something]:, then convert it into span. So that you don't have to define every smile, and it is easy to maintain.

---

If you are doing this on page load, then you can do this in a $(document).ready(). Then you can use selector that you have $('.line:contains(":wink:")') and use the $each operator to loop over each one and perform the update. This will cover you for the page load. But if you refactor that $each code into a method, then you can call it each time the text is updated. I think this will give you the best in both cases. Something like this:

function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
    //Replace the wink here
  });
}

$(document).ready(function(){
replaceWinks();
});

I would recommend replacing the winks server side for the page load though. It will be more performant. Also it will avoid content that changes when after the first view.

---

Jeaffrey Gilbert's idea is good, but I have another one that may be interesting: write down you winks the way you want(let's say [SmileName]), and when processing the text with jquery, read every one of them, and replace the [ with <div class=" then replace the ] sign, with "></div>, this way, you will end up like this:

using these smilies:

1- [smile]

2- [wink]

3- [shy]

will lead to the following markup

1- <div class="smile"></div>

2- <div class="wink"></div>

3- <div class="shy"></div>

and using CSS, you will give every class of them, a different background image, which is the smile image.

by utilizing this method, every div will lead to displaying your smilies, and you will write the code once, and end up using it wherever you want, without repeating yourself