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

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 表示，并使用它来创建“文本到 unicode”对的映射，然后用它替换输入文本。我找到了这个方便的表情符号小网站，但还有更多网站:http://character-code.com/emoticons-html-codes.php .

这是添加到 body 标签中的一个小设置和脚本，用于执行我上面描述的操作:

$(document).ready(function() {
  var smileyMap = {
    ':)': '😊',
    ':(': '😣'
      // 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>