移动端需要用到发送表情的功能,就在网上找了把emoji表情转换成了实体字符,便于后端保存,但是在删除表情的时候遇到了难题,选择错了表情需要删除,用js删除,但是实体字符需要删除两次才能把一个表情删除,删除一次界面会出现一个乱码的问号,通过字符串截取获得的是一个看不见的字符串,实在不知道怎么删除。
字符串样式如下:
'你😉😉好'
删除文字没问题,删除实体字符就会出现乱码,求高手。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus庐">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="content">
<textarea rows="" cols="" id="msg_input"></textarea>
<div class="face_list">
<ul>
<li v-on:click="insert_emoji">😀</li>
<li v-on:click="insert_emoji">😁</li>
<li v-on:click="insert_emoji">😂</li>
<li v-on:click="insert_emoji">😃</li>
<li v-on:click="insert_emoji">😄</li>
<li v-on:click="insert_emoji">😅</li>
<li v-on:click="insert_emoji">😆</li>
<li v-on:click="insert_emoji">😇</li>
<li v-on:click="insert_emoji">😈</li>
<li class="face_delete" v-on:click="delete_emoji">X</li>
</ul>
</div>
</div>
<style type="text/css">
* {padding: 0; margin: 0;}
ul,li {list-style: none;}
.content {width: 500px; margin: 0 auto;}
.face_list {}
.face_list ul {display: flex; flex-wrap: wrap; justify-content: space-around;}
.face_list li {display: inline-block; width: 3rem; height: 3rem; line-height: 3rem; font-size: 28px; text-align: center; cursor: pointer;}
.face_delete {background-color: brown; border-radius: 50%; color: #FFF;}
</style>
<script type="text/javascript">
var msg_input = jQuery('#msg_input');
var app = new Vue({
el: '.content',
data: {
},
methods: {
insert_emoji: function(e){
var _this = e.currentTarget;
var msg_info = jQuery(msg_input).val();
jQuery(msg_input).val(msg_info + _this.innerText);
console.log(jQuery(msg_input).val())
},
delete_emoji: function(){
var msg_info = jQuery(msg_input).val();
msg_info = msg_info.substr(0, msg_info.length - 1);
console.log(msg_info)
jQuery(msg_input).val(msg_info);
}
}
});
</script>
</body>
</html>
代码如上所示,在手机上可以添加到输入框内,电脑上居然不显示,我也不知道什么原因,可以打开控制台查看打印结果,点击表情可以添加到输入框,点击最后一个X是删除,点击一次后,会出现一个乱码标志,点击两次才会正常删除。
答题之前问个问题,是否所有emoji标签都是打头;结尾中间六位数的数字
假如标签规则如此,那使用string的replace是很方便就可以解决的
我注意到,一个表情占两个字符。
所以你用js的subStr用来去掉最后一位是有问题的。
我产生了一个思路,就是通过判断两个字符是否是emoji。
比如你现在的需求,点击按钮删除字符串最后一位。
可以先取出最后两位字符,判断是否emoji,如果是,删除两位,否则只删除一位。