JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<div id="maintbox">
  <div class="chat">
	  <div contenteditable="true" name="comment" tabindex="4" id="comment" class="com888" placeholder="Type here..."></div>
  </div>
</div>

CSS

#maintbox {
    top:50px;
	position:relative;
	min-height: 38px;
	width: 100%;
}
div.chat {
    width: 100%;
}

#comment {
    font-family:Times New Roman, Times, serif;
	font-size:12px;
  	min-height: 25px;
  	color:#000;
  	top:0; left:0; z-index:998; background: transparent;
	border: 2px solid #ccc;
	position:relative;
	float:left;
    width:100%;
    margin: 0;
    resize: none;
    padding-right:50px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

var smileys = {
    ':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
	':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
	':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
};

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function smilyMe(msg) {
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
    console.log(msg);
    for (var key in smileys) {
        msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]);
    }
    return msg;
}
$(document).ready(function() {
  $("#comment").bind("keyup", function(e) {
  	var EID = $(this).attr('class').replace('com','');
      console.log($(".com"+EID).html());
    $(".com"+EID).html(smilyMe($(".com"+EID).html()));
  });
});