Show smilies images in text are using JQuery

Question

I am handling similes in textarea. I am trying this following code.

<script type="text/javascript">
    function insertSmiley(smiley)
    {

        var currentText = document.getElementsByName("replybody")[0];

        var smileyWithPadding = " " + smiley + " ";
        currentText.value += smileyWithPadding;
    currentText.focus();

    }
</script>
<img src="/images/smilies/ange.gif" onclick="insertSmiley('(angel)')" />
<img src="/images/smilies/angry.gif" onclick="insertSmiley(':@')" />
<img src="/images/smilies/argh.gif" onclick="insertSmiley('(argh)')" />
<img src="/images/smilies/confused.gif" onclick="insertSmiley(':Z')" />
<img src="/images/smilies/cool.gif" onclick="insertSmiley('B)')" />
<img src="/images/smilies/cry.gif" onclick="insertSmiley(';(')" />
<img src="/images/smilies/fag.gif" onclick="insertSmiley('(smoke)')" />
<img src="/images/smilies/frown.gif" onclick="insertSmiley('-.-')" />
<img src="/images/smilies/grin.gif" onclick="insertSmiley(':D')" />
<img src="/images/smilies/happy.gif" onclick="insertSmiley(':)')" />
<img src="/images/smilies/love.gif" onclick="insertSmiley(':3')" />
<img src="/images/smilies/newbie.gif" onclick="insertSmiley('(newb)')" />
<img src="/images/smilies/oh.gif" onclick="insertSmiley(':o')" />
<img src="/images/smilies/oh2.gif" onclick="insertSmiley(':O')" />
<img src="/images/smilies/oh3.gif" onclick="insertSmiley(':|')" /><br />
<img src="/images/smilies/question.gif" onclick="insertSmiley('(question)')" />
<img src="/images/smilies/roll.gif" onclick="insertSmiley('o.o')" />
<img src="/images/smilies/sad.gif" onclick="insertSmiley('>:(')" />
<img src="/images/smilies/santa.gif" onclick="insertSmiley('(santa)')" />
<img src="/images/smilies/shame.gif" onclick="insertSmiley(':$')" />
<img src="/images/smilies/slant.gif" onclick="insertSmiley(':/')" />
<img src="/images/smilies/sleep.gif" onclick="insertSmiley('(zzz)')" />
<img src="/images/smilies/tdown.gif" onclick="insertSmiley('(thumbdown)')" />
<img src="/images/smilies/tongue.gif" onclick="insertSmiley(':P')" />
<img src="/images/smilies/tonguew.gif" onclick="insertSmiley(';P')" />
<img src="/images/smilies/tup.gif" onclick="insertSmiley('(thumbup)')" />
<img src="/images/smilies/unhappy.gif" onclick="insertSmiley(':(')" />
<img src="/images/smilies/wink.gif" onclick="insertSmiley(';)')" />
<img src="/images/smilies/lovely.gif" onclick="insertSmiley('(L)')" />
<br />
<textarea name="replybody" id="replybody" rows="10" cols="80"></textarea>

Its Working good but its showing smilies attribute only like :) this format in text area.

But i need to show this format

enter image description here

If i am add click the smilie its show on the text area. This is possble? if this one is possible how can i do this. Please help me.

Check this link..http://stackoverflow.com/questions/3055515/replace-a-list-of-emoticons-with-their-images — Nibin, Oct 03 '13 at 12:20

score 1 · Answer 1 · answered Dec 08 '15 at 14:21

Look still here at such option. Smilies boot directly if you write the character :-) then receive a smile. The code can be finished a little for itself.

/* 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>

score 0 · Answer 2 · answered Oct 03 '13 at 12:24

0

In your text box you can simply use :) text smilie. After send message you may simply convert :) smilie to image. Like chat option of Gmail.

answered Oct 03 '13 at 12:24

Manwal

23,450
12
63
93

score 0 · Answer 3 · answered Oct 03 '13 at 13:03

You can maintain the array of smiles, and base on userclick event ( You may pass int no. or smile object) which will compare that and simply replace the text with Image.

$().ready(function () {
$('.imageSwitch').each(function () {
    string = $(this).text('MENU');
    $(this).html('<img src="images/temp.jpg" alt="' + string + '" />');
});

});

Show smilies images in text are using JQuery

3 Answers3