JS Regex emoticons
A very simple JavaScript Emoticons regex engine
HTML
<input id='write' type='text'>
<br>
<div id='textbox'>
</div>
<span class='sad'></span><span class='smile'></span>
CSS
.smile {
background-image: url('http://www.freesmileys.org/smileys/smiley-happy118.gif');
display: inline-block;
width: 20px;
height: 20px;
}
.sad {
background-image: url('http://arduino.cc/forum/Smileys/arduinoWide/smiley-sad.png');
width:16px;
height:16px;
display: inline-block;
}
JavaScript
/* var emotic = /:(.+):+/g;
$(function(){
var inp = $('#write');
var tb = $('#textbox');
inp.keypress(function(e){
code = e.keyCode ? e.keyCode : e.which;
if(code == 13) {
var filtered = inp.val().replace(emotic, "<img src='https://www.w3schools.com/images/w3schools_green.jpg' alt='W3Schools.com' code=\'$1\'>");
tb.append('<span style="display:block">'+filtered+'</span>');
inp.val('');
}
});
}); */
var emotic = /:(.+):+/g;
$(function() {
var inp = $('#write');
var tb = $('#textbox');
inp.keypress(function(e){
code = e.keyCode ? e.keyCode : e.which;
if(code == 13) {
let match;
var emoji;
var aa= inp.val()
while (match = emotic.exec(aa)) {
emoji = match[0];
tb.append('<span style="display:block">'+emoji+'</span>');
console.log(`Matched sequence ${ emoji } — code points: ${ [...emoji].length }`);
}
}
});
}