Question

我有这个示例代码，用于在提交消息时用表情符号替换文本。但是，当鼠标悬停在表情符号上时，我想在表情符号上添加标题以识别用户使用的表情符号类型，如何在当前代码中实现这一点？感谢

<html>
 <head>
   <title>Testing Emoticon</title>
 </head>
 <body>
   <input type="text" name="message" id="message">
   <br><br>
 <div class="results"></div>
 <script language="javascript" src="./assets/js/jquery-1.11.3.min.js"></script>
 <script>
   function replaceEmoticons(text) {
     var emoticons = {
       ':-)' : 'smile.png',
       ':)'  : 'smile.png',
       ';)'  : 'wink.png',
       ';-)' : 'wink.png',
       ':P'  : 'tongue.png'
     }, url = "http://localhost/cb/2/assets/img/smileys/", patterns = [],
     metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;

     // build a regex pattern for each defined property
     for (var i in emoticons) {
       if (emoticons.hasOwnProperty(i)){ // escape metacharacters
         patterns.push('('+i.replace(metachars, "\\$&")+')');
       }
     }

     // build the regular expression and replace
     return text.replace(new RegExp(patterns.join('|'),'g'), function(match) {
       return typeof emoticons[match] != 'undefined' ?
           '<img src="'+url+emoticons[match]+'"/>' :
           match;
     });
   }
 </script>
 <script>
   $('#message').keypress(function(e){
     if(e.which == 13){//Enter key pressed
       e.preventDefault();
       var emoticon = $('#message').val();
       $('.results').html(replaceEmoticons(emoticon));
     }
   });
 </script>
 </body>
</html>

主要目的已解决，当您输入:)时，悬停时的输出标题为smile来自smile.png感谢@PraveenKumar

我还可以自定义标题，例如，如果我输入:P标题的输出可能是Stick Out Tongue而不是来自tongue的{{1}}？

Answer 1

对于我的其他问题，我想出了一个基于我的研究和试错测试的解决方案。

当我看到Ben Alman的这个链接javascript emotify时，我有了一个想法。

所以我重新构建了我的代码，并提出了这个问题：

我修改了我的json数组以添加更多数据。

var emoticons = {
  ':-)' : ['smile.png', 'Smile'],
  ':)'  : ['smile.png', 'Smile'],
  ';)'  : ['wink.png', 'Wink'],
  ';-)' : ['wink.png', 'Wink'],
  ':P'  : ['tongue.png', 'Stick Out Tongue']
}, url = "http://localhost/cb/2/assets/img/smileys/", patterns = [],
     metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;

还有这个函数的一部分来匹配我的新json数组：

// build the regular expression and replace
return text.replace(new RegExp(patterns.join('|'),'g'), function (match) {
  return typeof emoticons[match][0] != 'undefined' ?
      '<img src="'+url+emoticons[match][0]+'" title="' + emoticons[match][1] + '" />' :
      match;
});

现在它真的按照我的需要工作。万岁！

Answer 2

替换时添加：

return text.replace(new RegExp(patterns.join('|'),'g'), function(match) {
  return typeof emoticons[match] != 'undefined' ?
    '<img src="'+url+emoticons[match]+'" title="' + emoticons[match].substr(0, emoticons[match].length-4) + '" />' :
  match;
});

工作区：http://jsbin.com/cotefuwate/edit?output

在javascript中悬停在表情符号上时添加标题

2 个答案: