Question

我从textarea获取值，并粘贴到div中。键入的值可能包含表情符号。在这些情况下，表情符号需要转换为可呈现的表情，而不是像现在一样复制粘贴类型的文本。

var composer = $('[data-textarea]');
var message = $.trim(composer.val());
var wrapper = $('[data-wrapper]');

here the smileys has to be converted
wrapper.append(message);

注意：我不想在这些帖子中更换可能的表情符号： Replacing text with smiley image using Jquery

我希望jquery能够根据浏览器设置转换为有意义的表情符号。

不要像这样替换：

$("body").html($("body").html().replace(/:sick;/g,'<div class="sick-face"></div>'));

Answer 1

您可以查找所需表情符号的unicode表示，并使用它来创建“text to unicode”对的映射，然后用它替换输入文本。我找到了这个方便的小脸书网站，但还有更多：http://character-code.com/emoticons-html-codes.php。

这是一个小的设置和脚本添加到body标签，完全按照我的描述进行操作：

$(document).ready(function() {
  var smileyMap = {
    ':)': '&#128522;',
    ':(': '&#128547;'
      // etc...
  };
  // on every character added
  $('#myInput').keyup(function(value) {
    // get the whole value
    var progressiveText = $('#myInput').val();
    // replace textual smileys with unicode representation
    for (var key in smileyMap) {
      while (progressiveText.indexOf(key) >= 0)
        progressiveText = progressiveText.replace(key, smileyMap[key]);
    }
    // update the html
    $('#myDiv').html(progressiveText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="myInput" type="text" name="text" />
</div>
<br />
<div id="myDiv"></div>

如何在不重新加载页面的情况下将textarea值转换为有意义的内容？

1 个答案: