带表情的评论

最新推荐文章于 2022-01-19 10:53:25 发布

原创

最新推荐文章于 2022-01-19 10:53:25 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #移动端

该博客介绍了移动端评论系统中如何处理含有表情的字符串，包括数据库编码格式、字符串转义等问题，并提供了一个完整的DEMO，涉及HTML、CSS和JS代码。在存取表情数据时需注意字符串处理，以确保正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整demo下载

效果展示

注意

在将编辑好的含有表情的字符串存入数据库之后，可能由于编码格式及转义等原因，导致取回的字符串有所改变，存入数据和取出数据的时候需要需要做一些字符串的处理。

以下是我在项目中遇到问题的解决方案（你可能和我遇到的问题不同，仅作参考）
存入

//将 " 替换成一串特殊的字符串（确保不会和输入重复）
var str = str.replace(/"/g, "147852");  
//将 / 替换成一串特殊的字符串（确保不会和输入重复）
var str = str.replace(/\//g, "147833");

取出

//对 " 的还原
buff.detail = buff.detail.replace(/147852/g, '"');
//对 / 的还原
buff.detail = buff.detail.replace(/</g, '<'); 
//对 / 的还原
buff.detail = buff.detail.replace(/147833/g, "/");  
//对 = 的还原
buff.detail = buff.detail.replace(/＝/g, "=");

以下是这个demo的主要代码

完整demo下载

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/A-emoji.css"/>

    <style type="text/css">
        .box{
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
        }
        #display{
            height: 500px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="display">
        <div class="commentBox">
            <div class="li">
                <div class="icon">
                    <img src="img/AcFun/1.png"/>
                </div>
                <div class="content">
                    <div class="name">
                        adrian
                    </div>
                    <div class="time">
                        一小时前
                    </div>
                    <div class="text">
                        UISDGUIGV我就偶尔开发票【qweko-fqwekoifhwejhfiwejfo就我破防奇偶未交卡佛尔
                    </div>
                </div>
            </div>

            <div class="li">
                <div class="icon">
                    <img src="img/AcFun/1.png"/>
                </div>
                <div class="content">
                    <div class="name">
                        adrian
                    </div>
                    <div class="time">
                        一小时前
                    </div>
                    <div class="text">
                        UISDGUIGV我就偶尔开发票【qweko-fqwekoifhwejhfiwejfo就我破防奇偶未交卡佛尔
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="box">
        <!--<div class="InputBox">     
            <div class="input">     
                <div contenteditable="true" class="text"></div>                      
              <div class="btnGroup">


                <button data="emoji" class="btn" style="bottom: 0;right: 30px;">表情</button>
                <button data="confirm" class="btn" style="bottom: 0;right: 0px;">确定</button>
              </div>     
            </div> 
            <div class="emojiBox">
                <section class="emoji_container">
                </section>
        </div>      -->
    </div>



    <script src="js/jquery-2.1.0.js" type="text/javascript" charset=