Home / Questions / 1270
Accepted
Chofoteddy
Asked: 2020-12-18 09:37:00 +0800 CST 2020-12-18 09:37:00 +0800 CST

Add “emojis” to a web page

  • 772

I have seen sites like Twitter, Facebook, Bitbucket, Github, Gmail, among others. They add emojisafter typing a certain set of characters or some add them after posting the content. Something like:

:D - -> ?

I imagine there is a listener, programmed with regular expressions JavaScriptwaiting for content that matches that pattern and then replacing it with images or unicode (such as Font Awesome).

I would like to know what happens to achieve that. Is there a design pattern I can use? Do I need to have any special configuration in my DB( MySQL)?

Note: More than using a framework (if it exists) I would like to know how it is achieved.

javascript

3 Answers

  1. You do not need any database configuration, because to save resources, the rendering is done on the client's PC. Design patterns in I don't know, but in other languages ​​you would make a static and public class that contains a table ( hash ) of all the emoticons, in case you use it extensively.

    Process

    You find the string in the text when the person types and replace it with an image tag , ideally you should use an HTML component or something that doesn't limit you to just entering text as is the case with input, the easiest way is to add the property contenteditablethat will allow you to edit a fragment of the DOM.

    Here is a small example with 

    $('#editor').bind("DOMSubtreeModified", function() {

  //alert($('#editor').html);
  var texto = $('#editor').html();
  var pos = texto.search('\\:\\)');
  if (pos != -1) {
    alert('hallado en ' + pos);
    var tam = 5;
    var inicio = texto.slice(0, pos);
    var url = "http://simpleicon.com/wp-content/uploads/smile.png";
    var fin = texto.slice(pos + tam, texto.length);
    $('#editor').html(inicio + '<img src="' + url + '" width="35">' + fin);
  }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true">escribe dos puntos paréntesis que cierra aquí=></div>

    • 2
  2. Best Answer

    Here's an example of how to do what you want without any framework class, just vanilla-script:

    Note: I didn't have time to correctly implement the regex to capture the smile code :), but the general idea is functional:

    Code:

    window.onload = publicar;

function publicar(){
  
  var texto = document.getElementById('texto-origen').value;  
  var elemento_destino =  document.getElementById('elemento-destino');
  
  var emojis = [
    {codigo:':b',class:'emoji lengua'},
    {codigo:'xD',class:'emoji XD'},
    {codigo:':)',class:'emoji smile'}    
  ];   
  
  var result = findById( emojis, 45 );  
  
  for (i = 0; i < emojis.length; i++) { 
    
    var emoji = emojis[i];
    var image = '<div class="' + emoji.class + '"></div>'
        
    texto = replaceAll(texto,emoji.codigo,image);      
    
  }  
  
  elemento_destino.innerHTML = texto;
  
}


function findById(source, id) {
    return source.filter(function( obj ) {
        // coerce both obj.id and id to numbers 
        // for val & type comparison
        return +obj.id === +id;
    })[ 0 ];
}


function replaceAll(str, find, replace) {  
  try{
    return str.replace(new RegExp(find, 'g'), replace);
  }catch(ex){
    return str;
  }
}
    textarea{
  width:300px;
  margin-top:25px;
  height:50px;
}

#elemento-destino{
  font-size:2em;
  padding-top:5px;
}

.emoji{  
    display:inline-block;
    vertical-align:middle;
    width: 60px;
    height: 60px;
      background: url(https://s-media-cache-ak0.pinimg.com/236x/e9/b3/13/e9b313c5bad0465c6ee1cb51b06e9e2d.jpg); 

  
}

.emoji.lengua{  
  background-position: 0px 0px;
}

.emoji.XD{
 
  background-position: 0px 180px;
}

.emoji.smile{  
  background-position: 60px 0px;
}
    <strong>Prueba con xD y :b</strong><br/>
<textarea id="texto-origen" class="tarea">Hola xD mundo :b</textarea>
<button onclick="publicar()">Publicar</button>
<div id="elemento-destino"></div>

    • 2

  3. The most basic thing I can think of:

    • On your web page there is an image with all the sprites (in this case, emojis) that you want, for example smiley face and smiley face with teeth
    • Use JavaScript so that after it loads the content of the page (with jQuery it would be via $(document).ready()) that it evaluates the content of the <p>so <div>s where you need to replace the content of symbols such as :)and :Dwith labels <img>or <span>that represent parts of the image via CSS such as explained here . To make things easier, you could have CSS classes that already contain as background the exact sprite you need from the main image. To identify the <p>s and <div>s, you could use a CSS class, so that you reduce the analysis of the text where the change should be applied, and also reduce that somewhere in the generated HTML this replacement happens.
    • -1