js 如何删除输入框中的emoji实体字符表情

移动端需要用到发送表情的功能,就在网上找了把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">&#128512;</li>
            <li v-on:click="insert_emoji">&#128513;</li>
            <li v-on:click="insert_emoji">&#128514;</li>
            <li v-on:click="insert_emoji">&#128515;</li>
            <li v-on:click="insert_emoji">&#128516;</li>
            <li v-on:click="insert_emoji">&#128517;</li>
            <li v-on:click="insert_emoji">&#128518;</li>
            <li v-on:click="insert_emoji">&#128519;</li>
            <li v-on:click="insert_emoji">&#128520;</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是删除,点击一次后,会出现一个乱码标志,点击两次才会正常删除。

阅读 7.8k
2 个回答

答题之前问个问题,是否所有emoji标签都是打头;结尾中间六位数的数字

假如标签规则如此,那使用string的replace是很方便就可以解决的

'你&#128521;&#128521;好'.replace(/&#\d{6};/g,'') //你好

clipboard.png

我注意到,一个表情占两个字符。

所以你用js的subStr用来去掉最后一位是有问题的。

我产生了一个思路,就是通过判断两个字符是否是emoji。

比如你现在的需求,点击按钮删除字符串最后一位。

可以先取出最后两位字符,判断是否emoji,如果是,删除两位,否则只删除一位。

let number = msg_info.substr(msg_info.length - 2, msg_info.length).search(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/i)==-1?1:2;
msg_info = msg_info.substr(0, msg_info.length - number);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题