How to autocorrect text emoticons?

Question

JavaScript

Hello.
I decided to add text emoticons to my chat that are rendered on the client. Two problems arose.
1. How to make a normal (including in terms of performance) replacement of the text representation ":-)" with <img src='id.gif' title=':-)' />?
So far it works like this:

for (var i = 1; i < messages.smiliesList.length; i++){
  for (var j = 0; j < messages.smiliesList[i].length; j++){
    if (message.indexOf(messages.smiliesList[i][j],k)>-1){
      message = message.split(messages.smiliesList[i][j]).join('<img src="img/smilies/'+messages.leadingZero(i)+'.gif" title="'+messages.smiliesList[i][j]+'" alt="'+messages.smiliesList[i][j]+'" />');
    }
  }
}

But conflicts arise, for example, on a pair of emoticons "O :-)" and ":-)", the first after complete processing turns into

<img src='01.gif' title='O<img src='02.gif' title=':-)' />' />

.
So far, it seems that you need to somehow make a filter so that after each pass the text is parsed only outside the tags or somehow through several buffer variables. I have no idea how to analyze a string character-by-character, there are a lot of emoticons with a variety of representations. I don’t want to add any terminal characters or anything else either, the textual representation of the message will be broken.
2. There is also a problem in pop-up notifications, where I cut out all the tags, and replace the pictures with their title. I recognize it by the regular expression, it breaks on emoticons with the ">" sign in the text view.

Answer 1

1. The matrix structure is a little twisted, here with a regular array, I hope the idea is clear:
   

   function regexpify(str) {
   
       return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
   
   }
   
   function getIndex(smiles, name) {
       for (var i = 0, length = smiles.length; i < length; i++) {
           if (smiles[i].name === name) {
               return i;
           }
       }
       console.error('not found', name);
       return -1;
   }
   
   function process(message) {
       var smiles = messages.smiliesList,
           names = smiles.sort(function(a, b) {
               // сортируем имена, так что бы более специфичные были вначале
               return a.name.length > b.name.length ? 1 : -1;
           }).map(function(smile) {
               return regexpify(smile.name);
           }),
           regexp = new RegExp(names.join('|'), 'g');
   
       return message.replace(regexp, function(name) {
           return "<img src='/smiles/" + getIndex(smiles, name) + ".gif' alt='" + name + "'/>";
       })
   }
   

   
   
2. Using jQuery:
   

   function replaceImages(message) {
       return $('<div>').html(message).find('img').each(function(index, img) {
           $(img).replaceWith($(img).attr('alt'));
       }).end().html();
   }