Показать смайлики изображения в тексте с использованием JQuery

/* Script Face emotion 2015 */
jQuery(function($) {

  var face = { //If you want to change or increase quantity of smilies - add the character and the name of the picture here
    dir: 'http://www.picshare.ru/uploads/151208/',
    data: {
      ':-)': 'F9Ge6F1Z5O.gif',
      ';-)': 'p4VqWyef2v.gif',
      ':-D': 'gj9c245796.gif',
      ':-(': 'Y5dc8Bq55s.gif',
      ':*(': 'Mt8a2vui74.gif',
      ':-/': '2ggpK0t31J.gif',
      '8-/_': 'GdWHea1cJV.gif',
      ':-E': 'aANkgpv13r.gif',
      '%-0': 'x55E9ML36S.gif',
      '-?-': 'U0F8ULIZ5k.gif',
      '-!-': 'M3hi2ztDx2.gif',
      '0=-': '0fnk8Jg208.gif'
    },
    smooth: 200 //Smoothness of appearance in case of a clique 100-300
  };

  function addblockface() {
    var block = document.createElement('div'),
      data = face.data,
      i, img;
    for (i in data) {
      img = new Image();
      img.alt = i;
      img.src = face.dir + data[i];
      block.appendChild(img);
    }
    block.onmousedown = function(e) {
      if (e.target.tagName == 'IMG') {
        addFace(e.target.cloneNode(true));
      }
      return false;
    };
    gbtext.parentNode.insertBefore(block, gbtext);
  };

  function addFace(muzzle) {
    if (document.activeElement != textfield) {
      textfield.focus();
    }
    var sel = window.getSelection(),
      range = sel.getRangeAt(0);
    range.setOffset = range.endOffset;
    $(muzzle).hide().fadeIn(face.smooth);
    range.insertNode(muzzle);
    range.setStart(muzzle.nextSibling || muzzle.parentNode.appendChild(document.createTextNode('')), 0);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  };

  function parsPersons() {
    var data = face.data,
      treeWalker = document.createTreeWalker(textfield, NodeFilter.SHOW_TEXT, null, false);
    while (treeWalker.nextNode()) {
      var el = treeWalker.currentNode,
        text = el.data;
      Object.keys(data).forEach(function(key) {
        while (~el.data.indexOf(key)) {
          var next = el.splitText(el.data.indexOf(key)),
            img = new Image();
          img.alt = key;
          img.src = face.dir + data[key];
          el.parentNode.insertBefore(img, next);
          el = next.splitText(key.length);
          next.parentNode.removeChild(next);
        }
      })
    };
  };

  function experience() {
    toText();
    var text = gbtext.value;
    if (text.length > 1E3) {
      textfield.innerHTML = gbtext.value = text.substr(0, 1E3);
      parsPersons();
      var sel = window.getSelection(),
        range = sel.getRangeAt(0);
      range.setStart(textfield.appendChild(document.createTextNode('')), 0);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
    gbcounter.innerHTML = Math.max(1E3 - text.length, 0);
  };

  function obstacle() {
    var elems = textfield.getElementsByTagName('*'),
      i = 0;
    while (true) {
      if (elems[i]) {
        if (elems[i].tagName == 'IMG') {
          i++;
          continue;
        }
        elems[i].parentNode.replaceChild(document.createTextNode(elems[i].textContent), elems[i]);
      } else {
        break;
      }
    }
  };

  function toText() {
    var temp = textfield.cloneNode(true),
      face = temp.getElementsByTagName('img');
    while (face.length) {
      face[0].parentNode.replaceChild(document.createTextNode(face[0].alt + ' '), face[0]);
    }
    gbtext.value = temp.innerHTML
      .replace(/<(\w+)(?:[\s\S]+?)?>(.*?)<\/\1>/g, '\r$2\n')
      .replace(/&nbsp;/g, ' ')
      .replace(/<\/?\w+>/g, '')
      .replace(/^\s+/gm, '')
      .replace(/(\s)(?=\1)/g, '');
  };

  var gbmessages = $('.GuestText, .guestlist, textarea[name="entry_text"]'),
    gbtext = document.getElementsByName('gb_text')[0],
    gbcounter = document.getElementById('myCounter');
  if (gbtext && 'v' != '\v') {
    var textfield = document.createElement('div');
    textfield.className = 'gb_textfield';
    textfield.contentEditable = true;
    textfield.onblur = function() {
      experience();
      toText();
    };
    textfield.onkeydown = textfield.onmouseup = function() {
      obstacle();
      parsPersons();
      experience();
    };
    textfield.onpaste = function() {
      setTimeout(function() {
        textfield.onkeydown();
      }, 5);
    };
    if (gbtext.value) {
      textfield.innerHTML = gbtext.value;
      parsPersons();
    }
    gbtext.parentNode.insertBefore(textfield, gbtext);
    addblockface();
    experience();
  }
  if (gbmessages.length) {
    gbmessages.each(function() {
      var code, i, p = this.tagName == 'TEXTAREA' ? 'value' : 'innerHTML';
      for (i in face.data) {
        code = i.replace(/([^a-z0-9])/gi, '\\$1');
        this[p] = this[p].replace(new RegExp('[^"]?' + code + '(?!")', 'g'), '<img alt="" src="' + face.dir + face.data[i] + '">');
      }
    });
  }
});

.gb_textfield {
  border: 1px solid #959595; /* thickness, color of the frame */
  color: #000; /*  text color */
  width: 450px; /* field width */
  height: 150px; /* field height */
  overflow: auto; /* scroll bars */
  background-color: #FFF; /* background color */
  padding: 5px;
  word-wrap: break-word; /* Transfer of long words */
}
.gb_textfield img,
.GuestText img,
.guestlist img {
  margin: 0 2px; /* indents from a smile */
  vertical-align: middle;
}

.gb_textfield + div img {
  cursor: pointer;
  margin: 5px 3px 0;
}

.gb_textfield + div img: hover {
  background-color: transparent; /* smile background in case of a clique */
}

.gb_textfield ~ textarea {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<textarea name="gb_text"></textarea>
<p>Remained characters: <span id="myCounter"></span></p>