求教：輸入框文字和表情混合輸入排序問(wèn)題

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

<!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) {//判斷是否輸入了內(nèi)容
                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ā)送完清空輸入框內(nèi)容
                send_arry = [];
                send_emj_flg = 0;
                emj_arry = [];//顯示
                send_emj = [];//發(fā)送
            } else {
                alert('沒(méi)輸入');
            }
        };


        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ā)送后顯示圖標(biāo)
                    /**/
                    send_arry.push(send_emj[send_emj.length - 1]);//每次點(diǎn)擊的表情都會(huì)push到send_arry,所以send_emj只取最后一個(gè)即可
                    /**/
                    if (send_txt.value.length > 0) {//起手點(diǎn)擊表情沒(méi)有文字輸入
                        send_txt.value = send_txt.value + '[' + this.title + ']';
                    }
                    if (send_txt.value.length === 0) {//文字輸入在先然后再點(diǎn)擊表情
                        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="調(diào)皮"></i>
            <i title="呲牙"></i>
            <i title="驚訝"></i>
            <i title="難過(guò)"></i>
            <i title="酷"></i>
            <i title="冷汗"></i>
            <i title="抓狂"></i>
            <i title="吐"></i>
            <i title="delKey"></i>
        </li>
    </ul>
</div>
</body>
</html>

我是初學(xué)者，目前自己在自學(xué)前端，求教諸位前輩指點(diǎn)思路，在此感謝?。?！

回答

編輯回答

怪痞

或許你可以調(diào)整一下思路：不在用戶(hù)輸入時(shí)處理，而是在展示時(shí)才處理內(nèi)容。

你之前的思路：用戶(hù)點(diǎn)擊表情，又是判斷輸入框里之前的內(nèi)容，又是存儲(chǔ)表情，等等。

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

提供一個(gè)簡(jiǎn)單的代碼：

// 存儲(chǔ)所有表情，方便轉(zhuǎn)換
/*
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'
  };
}

// 將文字轉(zhuǎn)換為圖片
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 + ']';
  }
});

// 點(diǎn)擊按鈕發(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>'; // 把表情轉(zhuǎn)換為圖片后輸出
  textarea.value = '';
});

2017年8月9日 16:03