求教：輸入框文字和表情混合輸入排序問題

我的實現(xiàn)思路是：
1.用一個數(shù)組，儲存用戶輸入框的所有內容（包括表情和輸入的文本）
2.監(jiān)聽onchange事件，將每次輸入的文本都單獨提取出來push到顯示數(shù)組內
3.表情用兩個數(shù)組保存，點擊表情圖標時，獲取當前點擊的表情將該表情的title和src分別保存在兩個數(shù)組內，title數(shù)組用戶輸入框顯示，src的數(shù)組用戶發(fā)送后顯示表情圖標
問題描述：
按照輸入的順序（包含文本和表情）顯示正確，如果在已經輸入的內容中再插入新的內容顯示會異常（在已輸入的文本中再插入文本目前正常，主要是在已經輸入的表情中再插入文本，顯示異常）。
例如：輸入[微笑]123[微笑]，實際是先輸入的微笑，然后后兩個表情中間插入的123；文字和表情混合輸入會顯示異常
圖片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        #div_body {
            width: 720px;
            margin: 0 auto;
        }

        #div_1 {
            width: 720px;
            height: 200px;
            background-color: black;
            opacity: 0.7;
            color: white;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #div1 img {
            width: 24px;
            height: 24px;
        }

        #send {
            width: 720px;
            height: 32px;
            background-color: #954b4b;
        }

        #send > button {
            display: inline-block;
            width: 60px;
            height: 32px;
            float: right;
        }

        textarea {
            float: left;
            display: block;
            width: 660px;
            font-family: 微軟雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 16px;
            height: 32px;
            max-height: 80px;
            resize: none;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px inset;
            padding: 5px 10px;
            overflow: hidden;
            outline: none;
        }

        #div_ul > li {
            width: 720px;
            height: 287px;
            background-image: url("004.jpg");
            clear: both;
        }

        #div_ul li i {
            display: block;
            float: left;
            width: 102px;
            height: 93px;
        }

        #div_ul li i:hover {
            border: 1px solid #5f9cc5;
        }
    </style>
</head>
<body>
<script>
    window.onload = function () {
        var div_1 = document.getElementById('div_1');
        var send = document.getElementById('send');
        var div_ul = document.getElementById('div_ul');
        var send_txt = send.firstElementChild;
        var send_button = send.lastElementChild;
        var emj_i = document.getElementsByTagName('i');


        send_button.onclick = function () {
            if (send_txt.value.length !== 0) {//判斷是否輸入了內容
                var send_list = document.createElement('div');
                var new_p = document.createElement('p');
                div_1.appendChild(send_list);
                send_list.appendChild(new_p);
                /**/
                new_p.innerHTML = send_arry.join('');
                /**/
                send_txt.value = '';//發(fā)送完清空輸入框內容
                send_arry = [];
                send_emj_flg = 0;
                emj_arry = [];//顯示
                send_emj = [];//發(fā)送
            } else {
                alert('沒輸入');
            }
        };


        var send_arry = [];
        send_txt.onchange = function () {
            send_arry.push(this.value.substring(send_emj_flg));
            console.log(send_arry);
            console.log(this.value.length);
        };

        var emj_arry = [];//顯示
        var send_emj = [];//發(fā)送
        var send_emj_flg = 0;
        for (var i = 0; i < emj_i.length; i++) {
            emj_i[i].index = i;
            emj_i[i].onclick = function () {
                //debugger;
                if (this.title !== 'delKey') {
                    emj_arry.push('[' + this.title + ']');
                    emj_arry.toString();
                    send_emj.push("<img src=\"http://pub.idqqimg.com/lib/qqface/" + this.index + ".gif\">");//用于表情發(fā)送后顯示圖標
                    /**/
                    send_arry.push(send_emj[send_emj.length - 1]);//每次點擊的表情都會push到send_arry,所以send_emj只取最后一個即可
                    /**/
                    if (send_txt.value.length > 0) {//起手點擊表情沒有文字輸入
                        send_txt.value = send_txt.value + '[' + this.title + ']';
                    }
                    if (send_txt.value.length === 0) {//文字輸入在先然后再點擊表情
                        send_txt.value = emj_arry.join('');
                    }
                    /*11.13*/
                    send_emj_flg = send_txt.value.length;
                    /*11.13*/
                }
                else {
                    alert('這是刪除');
                }
            }
        }
    };
</script>
<div id="div_body">
    <div id="div_1"></div>
    <div id="send">
        <textarea></textarea>
        <button>發(fā)送按鈕</button>
    </div>
    <ul id="div_ul">
        <li>
            <i title="微笑"></i>
            <i title="撇嘴"></i>
            <i title="色"></i>
            <i title="發(fā)呆"></i>
            <i title="得意"></i>
            <i title="流淚"></i>
            <i title="害羞"></i>
            <i title="閉嘴"></i>
            <i title="睡"></i>
            <i title="大哭"></i>
            <i title="尷尬"></i>
            <i title="發(fā)怒"></i>
            <i title="調皮"></i>
            <i title="呲牙"></i>
            <i title="驚訝"></i>
            <i title="難過"></i>
            <i title="酷"></i>
            <i title="冷汗"></i>
            <i title="抓狂"></i>
            <i title="吐"></i>
            <i title="delKey"></i>
        </li>
    </ul>
</div>
</body>
</html>

我是初學者，目前自己在自學前端，求教諸位前輩指點思路，在此感謝?。?！

回答

編輯回答

怪痞

或許你可以調整一下思路：不在用戶輸入時處理，而是在展示時才處理內容。

你之前的思路：用戶點擊表情，又是判斷輸入框里之前的內容，又是存儲表情，等等。

其實這些都不用，我們換成這樣的思路：先不管用戶如何輸入，他怎么輸入，輸入框就怎樣展示，比如他輸入兩個表情與一個文本，那么輸入框的內容是[微笑]123[撇嘴]，等到用戶點擊發(fā)送按鈕要把內容展示到聊天框里時，再把[微笑]和[撇嘴]轉換為表情。

提供一個簡單的代碼：

// 存儲所有表情，方便轉換
/*
emj_arry = {
  [冷汗] : {
    text: "冷汗",
    url: "http://pub.idqqimg.com/lib/qqface/17.gif"
  },
  [發(fā)呆] : {
    text: "發(fā)呆",
    url: "http://pub.idqqimg.com/lib/qqface/3.gif"
  }
}
*/
var emj_arry = {}; //表情列表
var emj_i = document.getElementsByTagName('i');
for(var i=0, len=emj_i.length; i<len; i++){
  var item = emj_i[i];
  // emj_arry.push( '[' + item.title + ']' );
  emj_arry[ '[' + item.title + ']'  ] = {
    text : item.title,
    url : 'http://pub.idqqimg.com/lib/qqface/' + i + '.gif'
  };
}

// 將文字轉換為圖片
function emoj2img(text){
  return text.replace(/\[(.*?)\]/g, function(word){
    return '<img src="'+emj_arry[word].url+'" alt="'+word+'" />';
  })
}

// 輸入表情
document.querySelector('#div_ul').addEventListener('click', function(event){
  if(event.target.tagName=='I' && event.target.title!=='delKey'){
    send_txt.value = send_txt.value + '[' + event.target.title + ']';
  }
});

// 點擊按鈕發(fā)送
document.querySelector('button').addEventListener('click', function(){
  var textarea = document.querySelector('#send textarea'),
      value = textarea.value;
  
  document.querySelector('#div_1').innerHTML += '<p>'+emoj2img(value)+'</p>'; // 把表情轉換為圖片后輸出
  textarea.value = '';
});

2017年8月9日 16:03