Javascript 使用JQuery显示文本中的微笑图像

我在文本区处理明喻。我正在尝试以下代码

<script type="text/javascript">
    function insertSmiley(smiley)
    {

        var currentText = document.getElementsByName("replybody")[0];

        var smileyWithPadding = " " + smiley + " ";
        currentText.value += smileyWithPadding;
    currentText.focus();

    }
</script>
<img src="/images/smilies/ange.gif" onclick="insertSmiley('(angel)')" />
<img src="/images/smilies/angry.gif" onclick="insertSmiley(':@')" />
<img src="/images/smilies/argh.gif" onclick="insertSmiley('(argh)')" />
<img src="/images/smilies/confused.gif" onclick="insertSmiley(':Z')" />
<img src="/images/smilies/cool.gif" onclick="insertSmiley('B)')" />
<img src="/images/smilies/cry.gif" onclick="insertSmiley(';(')" />
<img src="/images/smilies/fag.gif" onclick="insertSmiley('(smoke)')" />
<img src="/images/smilies/frown.gif" onclick="insertSmiley('-.-')" />
<img src="/images/smilies/grin.gif" onclick="insertSmiley(':D')" />
<img src="/images/smilies/happy.gif" onclick="insertSmiley(':)')" />
<img src="/images/smilies/love.gif" onclick="insertSmiley(':3')" />
<img src="/images/smilies/newbie.gif" onclick="insertSmiley('(newb)')" />
<img src="/images/smilies/oh.gif" onclick="insertSmiley(':o')" />
<img src="/images/smilies/oh2.gif" onclick="insertSmiley(':O')" />
<img src="/images/smilies/oh3.gif" onclick="insertSmiley(':|')" /><br />
<img src="/images/smilies/question.gif" onclick="insertSmiley('(question)')" />
<img src="/images/smilies/roll.gif" onclick="insertSmiley('o.o')" />
<img src="/images/smilies/sad.gif" onclick="insertSmiley('>:(')" />
<img src="/images/smilies/santa.gif" onclick="insertSmiley('(santa)')" />
<img src="/images/smilies/shame.gif" onclick="insertSmiley(':$')" />
<img src="/images/smilies/slant.gif" onclick="insertSmiley(':/')" />
<img src="/images/smilies/sleep.gif" onclick="insertSmiley('(zzz)')" />
<img src="/images/smilies/tdown.gif" onclick="insertSmiley('(thumbdown)')" />
<img src="/images/smilies/tongue.gif" onclick="insertSmiley(':P')" />
<img src="/images/smilies/tonguew.gif" onclick="insertSmiley(';P')" />
<img src="/images/smilies/tup.gif" onclick="insertSmiley('(thumbup)')" />
<img src="/images/smilies/unhappy.gif" onclick="insertSmiley(':(')" />
<img src="/images/smilies/wink.gif" onclick="insertSmiley(';)')" />
<img src="/images/smilies/lovely.gif" onclick="insertSmiley('(L)')" />
<br />
<textarea name="replybody" id="replybody" rows="10" cols="80"></textarea>

函数insertSmiley（smiley）
{
var currentText=document.getElementsByName（“replybody”）[0]；
变量smileyWithPadding=“+smiley+”；
currentText.value+=带填充的微笑；
currentText.focus（）；
}


:(')" />

其工作良好，但其显示笑脸属性仅与

：）

文本区域中的此格式类似

但是我需要展示这个格式

---

如果我正在添加，请单击表情图标，它会显示在文本区域。这是可能的？如果可能的话，我该如何做。请帮助我。

在您的文本框中，您可以简单地使用：）文本表情图标。发送消息后，您可以简单地将：）表情图标转换为图像。就像Gmail的聊天选项一样。

您可以维护微笑数组，并基于用户单击event（您可以传递int no.或smile object），它将比较这一点，并简单地用图像替换文本

$().ready(function () {
$('.imageSwitch').each(function () {
    string = $(this).text('MENU');
    $(this).html('<img src="images/temp.jpg" alt="' + string + '" />');
});

$（）.ready（函数（）{
$（'.imageSwitch'）。每个（函数（）{
字符串=$（this.text（'MENU'）；
$（this.html（“”）；
});

---

})

仍在此处查看此选项。如果您写入字符：-），则直接启动微笑，然后收到微笑。 代码可以自己完成一点

/*脚本面部表情2015*/
jQuery（函数（$）{
var face={//如果您想更改或增加笑脸的数量，请在此处添加图片的字符和名称
迪尔：'http://www.picshare.ru/uploads/151208/',
数据：{
“：-）”：“F9Ge6F1Z5O.gif”，
“；-）”：“p4VqWyef2v.gif”，
“：-D”：“gj9c245796.gif”，
“：-（”：“Y5dc8Bq55s.gif”，
“：*（”：“Mt8a2vui74.gif”，
“：-/”：“2ggpK0t31J.gif”，
“8-/\”：“GdWHea1cJV.gif”，
“：-E”：“aANkgpv13r.gif”，
“%-0”：“x55E9ML36S.gif”，
“-？-”：“U0F8ULIZ5k.gif”，
“-！-”：“M3hi2ztDx2.gif”，
“0=-”：“0fnk8Jg208.gif”
},
平滑：200//集团情况下外观的平滑度100-300
};
函数addblockface（）{
var block=document.createElement（'div'），
data=face.data，
i、 img；
对于（数据中的i）{
img=新图像（）；
img.alt=i；
img.src=face.dir+data[i]；
块。附加子块（img）；
}
block.onmousedown=函数（e）{
如果（e.target.tagName=='IMG'）{
addFace（如target.cloneNode（true））；
}
返回false；
};
gbtext.parentNode.insertBefore（块，gbtext）；
};
功能添加面（枪口）{
if（document.activeElement！=textfield）{
textfield.focus（）；
}
var sel=window.getSelection（），
范围=选择范围（0）；
range.setOffset=range.endOffset；
$（口吻）.hide（）.fadeIn（面部.平滑）；
射程。插入节点（枪口）；
range.setStart（muzzle.nextSibling | | muzzle.parentNode.appendChild（document.createTextNode（“”）），0）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
};
职能人员（）{
var数据=面数据，
treeWalker=document.createTreeWalker（textfield，NodeFilter.SHOW_TEXT，null，false）；
while（treeWalker.nextNode（））{
var el=treeWalker.currentNode，
text=el.data；
Object.keys（数据）.forEach（函数（键）{
而（~el.data.indexOf（key））{
var next=el.splitText（el.data.indexOf（key）），
img=新图像（）；
img.alt=键；
img.src=face.dir+data[key]；
el.parentNode.insertBefore（img，next）；
el=下一个.splitText（键.长度）；
next.parentNode.removeChild（next）；
}
})
};
};
功能体验（）{
toText（）；
var text=gbtext.value；
如果（text.length>1E3）{
textfield.innerHTML=gbtext.value=text.substr（0，1E3）；
个人（）；
var sel=window.getSelection（），
范围=选择范围（0）；
range.setStart（textfield.appendChild（document.createTextNode（“”）），0）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
gbcounter.innerHTML=Math.max（1E3-text.length，0）；
};
功能障碍（）{
var elems=textfield.getElementsByTagName（'*'），
i=0；
while（true）{
if（elems[i]）{
if（元素[i]。标记名=='IMG'）{
i++；
继续；
}
elems[i].parentNode.replaceChild（document.createTextNode（elems[i].textContent），elems[i]）；
}否则{
打破
}
}
};
函数toText（）{
var temp=textfield.cloneNode（真），
face=temp.getElementsByTagName（'img'）；
while（面长）{
面[0].parentNode.replaceChild（document.createTextNode（面[0].alt+''），面[0]）；
}
gbtext.value=temp.innerHTML
.替换（/（.*）/g，'\r$2\n'）
.replace（//g'，）
.replace（//g'，）
.替换（/^\s+/gm，“”）
.替换（/（\s）（？=\1）/g'）；
};
变量gbmessages=$（'.GuestText、.guestlist、textarea[name=“entry_text”]），
gbtext=document.getElementsByName（'gb_text'）[0]，
gbcounter=document.getElementById（'myCounter'）；
如果（gbtext&&v'！='\v'）{
var textfield=document.createElement（'div'）；
textfield.className='gb_textfield'；
textfield.contentEditable=true；
textfield.onblur=函数（）{
经验（）；
toText（）；
};
textfield.onkeydown=textfield.onmouseup=function（）{
障碍（）；
个人（）；
经验（）；
};
textfield.onpaste=函数（）{
setTimeout（函数（）{
textfield.onkeydown（）；
}, 5);
};
if（gbtext.value）{
textfield.innerHTML=gbtext.value；
个人（）；
}
gbtext.parentNode.insertBefore（textfield，gbtext）；
addblockface（）；
经验（）；
}
if（gbmessages.length）{
gbmessages.each（函数（）{
变量代码，i，p=this.tagName=='TEXTAREA'？'value'：'innerHTML'；
用于（i在面数据中）{
代码=i.替换（/（[^a-z0-9]）/gi，\\$1'）；
这个[p]=这个[p]。