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

将“表情符号”添加到网页

  • 772

我见过像Twitter, Facebook, Bitbucket, Github,Gmail等网站。他们emojis在键入一组字符后添加，或者在发布内容后添加它们。就像是：

：D-->?

我想有一个侦听器，用正则表达式编程，JavaScript等待与该模式匹配的内容，然后用图像或 unicode（例如 Font Awesome）替换它。

我想知道实现这一目标会发生什么。有我可以使用的设计模式吗？我需要在我的 DB( MySQL) 中进行任何特殊配置吗？

注意：除了使用框架（如果存在）之外，我还想知道它是如何实现的。

javascript

3 Answers

  1. 您不需要任何数据库配置，因为为了节省资源，渲染是在客户端的 PC 上完成的。我不知道中的设计模式，但在其他语言中，您将创建一个包含所有表情符号的表（散列）的静态和公共类，以防您广泛使用它。

    过程

    当人员键入时，您会在文本中找到字符串并将其替换为图像标记，理想情况下，您应该使用 HTML 组件或不限制您只输入文本的其他东西，input最简单的方法是添加允许contenteditable您编辑DOM.

    这是一个带有

    $('#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

    这是一个示例，说明如何在没有任何框架类的情况下做你想做的事，只是 vanilla-script：

    注意：我没有时间正确实现正则表达式来捕获微笑代码:)，但总体思路是有效的：

    代码：

    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. 我能想到的最基本的东西：

    • 在您的网页上有一张包含您想要的所有精灵（在本例中为表情符号）的图像，例如笑脸和带牙齿的笑脸
    • 使用 JavaScript，以便在它加载页面的内容（使用 jQuery 它将是 via $(document).ready()）之后，它会评估你需要用标签替换符号内容的<p>so的内容，或者用标签或代表图像的一部分通过 CSS 如这里解释。为了让事情变得更简单，您可以让 CSS 类已经包含作为背景的您需要的主图像中的确切精灵。要识别s 和s，您可以使用 CSS 类，以便减少对应应用更改的文本的分析，并减少在生成的 HTML 中发生这种替换的地方。<div>:):D<img><span><p><div>
    • -1