的更新：

Question

我有一个contenteditable div。我想将笑脸代码替换为 keyup / keydown 事件上的笑脸图像。我已经理解问题Replace smiley codes to images的标记答案代码，用于将笑脸代码替换为图像。

所以我尝试修改keyup / keydown事件但是，它没有用。下面是修改后的代码片段。

var emoticons = {
        ':-)' : 'chair.gif',
        ':)'  : 'cheers1.gif',
        ':D'  : 'clapping.gif',
        ':-|' : 'dance.gif'
      };

    var url = "http://digitalsetups.com/emoji/";
    var patterns = [];
    var 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, "\\$&")+')');
       }
    }
    // Building Regex Expression
    var regex = new RegExp(patterns.join('|'),'g');

    // My modification starts here to replace smiley code to image on keyup/keydown events
    $(document).ready(function(){
        $("#chatMessage").keyup(function(){
        // var start = this.selectionStart;
            $("#chatMessage").html($("#chatMessage").html().replace(regex, 
    				function (match) {
        				return typeof emoticons[match] != 'undefined' ?
               				'<img src="'+url+emoticons[match]+'"/>' :
               				match;
     				}));
         // this.selectionEnd = start;
            });
    });

#chatMessage {
max-height: 20px;
max-width: 400px;
overflow: auto;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
   </head>
   <body>
      <div id="chatMessage" contenteditable>This is contenteditable div. Press space to change :) into image. Or :-) into another image.</div>
   </body>
</html>

的更新：

我更新了JQuery代码。在val()定义中将html()更改为keyup function()。当我更改它时，代码更改为图像在键盘上但是每次我都会将光标移动到行首写1个字符。
我尝试过selectionStart的解决方案 selectionEnd（我在代码中对此进行了评论。）没有发生。另外，如果我指定开始位置为selectionEnd 并且结束位置为selectionStart 然后，光标工作但是笑脸代码不会改变。

Answer 1

.val()不适合用于此方法 - 您希望获取并设置元素的innerHTML，因此请使用jQuery的.html()方法。

Answer 2

这是一个更高效的版本，用于所有contenteditables，特别是如果你的contenteditables是聊天框，因为有时用户不仅键入它。

var emoticons = {
        ':-)' : 'chair.gif',
        ':)'  : 'cheers1.gif',
        ':D'  : 'clapping.gif',
        ':-|' : 'dance.gif'
      };

    var url = "http://digitalsetups.com/emoji/";
    var patterns = [];
    var 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, "\\$&")+')');
       }
    }
    // Building Regex Expression
    var regex = new RegExp(patterns.join('|'),'g');

    // My modification starts here to replace smiley code to image on keyup/keydown events
    $(function(){
        $("#chatMessage").on('blur keyup paste input', function(){
        // var start = this.selectionStart;
            $("#chatMessage").html($("#chatMessage").html().replace(regex, 
    				function (match) {
        				return typeof emoticons[match] != 'undefined' ?
               				'<img src="'+url+emoticons[match]+'"/>' :
               				match;
     				}));
         // this.selectionEnd = start;
            });
    });

#chatMessage {
max-height: 20px;
max-width: 400px;
overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="chatMessage" contenteditable>This is contenteditable div. Press space to change :) into image. Or :-) into another image.</div>

在contenteditable div中使用keyup事件将文本替换为图像

的更新：

2 个答案: