将表情字符转换成对应的图片 用js

JavaScript07

将表情字符转换成对应的图片 用js,第1张

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

        /**

         * 需要将图片的名称和key的中括号中的字符对应。

         * @param key{string} 需要替换的内容

         * @param value{string} 代表的表情名称

         * @param baseDir{string} 基本的图片路径

         * @param prefix{string} 后缀名称

         * @returns {string} 完整的img标签

         */

        function test(key,value,baseDir,prefix){

          if(key.indexOf('[')===0 && key.indexOf(']')===key.length-1){

              var dir =  baseDir+"/"+ (key.substring(1,key.length-1))+"."+prefix

              return "<img src ='"+dir+"' alt='"+value+"'/>"

          }

        }

        var baseDir = "./"

        var key = "[Penguins]"

        var value ="萌企鹅一家"

        var prefix ="jpg"

        var dd = test(key,value,baseDir,prefix)

        window.onload = function(){

            document.body.innerHTML = dd

        }

    </script>

</head>

<body>

</body>

</html>

emoji表情的编码解码

该方法实体编码后内容在页面是可以直接显示的,不需要解码,只有在js中才需要解码,同名的php函数具有相同编码功能

下面这句是js编码方法,直接带入字符串就可以直接复制到项目中使用了

function emoji_encode(e){var n=/[\ud800-\udbff][\udc00-\udfff]/greturn e=e.replace(n,function(e){var n,rreturn 2===e.length?(n=e.charCodeAt(0),r=e.charCodeAt(1),""+(1024*(n-55296)+65536+r-56320)+""):e})}

下面是经过上面编码后,在js环境下乳 uni-app的h5页面中调用,需要调用下面的解码才能正常显示。

function emoji_decode(e){var n=/\.*?/greturn e.replace(n,function(e){var n,r,treturn 9==e.length?(t=parseInt(e.match(/[0-9]+/g)),n=Math.floor((t-65536)/1024)+55296,r=(t-65536)%1024+56320,unescape("%u"+n.toString(16)+"%u"+r.toString(16))):e})}

php环境下的编码通过下面方法调用代入str参数就可以了实现编码了 

function emoji_encode($str){

    preg_match_all('/./u',$str,$matches)

    $unicodeStr = ""

    foreach($matches[0] as $m){

        $unicodeStr .=(strlen($m) >= 4 )?"".base_convert(bin2hex(iconv('UTF-8',"UCS-4",$m)),16,10).'':$m

    }

    return $unicodeStr

}

可以使用js自带的转码方法escape(),encodeURI()和encodeURIComponent()。

下面是详细介绍:

Js中escape(),encodeURI()和encodeURIComponent()使用和比较:

escape方法以Unicode格式返回一个包含传入参数内容的string类型的值。 Escape方法会将传入参数中所有的空格、标点符号、重音字符以及其它任何非ASCII字符替换为%xx的编码形式,其中xx与其所表示的字符的16进制数表示形式相同。如空格字符的16进制表示形式为0x20,则此时xx应为20,即escape(‘ ’) 返回“%20”。

escape和unescape方法能够帮助你编码和解码字符串。escape方法对于ISO Latin字符集中的字符组成的参数,返回其16进制编码。相对应的,unescape方法则能将16进制编码形式的参数转化成为其ASCII码形式。

encodeURI方法返回一个经过编码的URI。如果将encodeURI方法的编码结果传递给decodeURI方法作参数,则能得到原始的未编码的字符串。需要注意到是encodeURI方法不编码如下字符":", "/", "", and "?"。如果想要编码这些字符,请使用encodeURIComponent方法。

encodeURIComponent方法返回一个编码过的URI。如果将encodeURIComponent方法的编码结果传递给encodeURIComponent方法作参数,则能得到原始的未编码的字符串。因为encodeURIComponent方法会编码所有的字符,所以如果待编码的字符串是用来表示一个路径(如/dir1/dir2/index.htm)时,就一定要小心使用了。‘/’符号会被其编码之后,将不再是一个有效的路径标识符,所以不能被web服务器正确地识别。当字符串包含一个单独的URI component(指?后面的请求参数)的时候,请使用此方法。

escape()不编码的字符:@*/+

encodeURI() 不编码的字符:~!@#$&*()=:/,?+"

encodeURIComponent()不编码的字符: ~!*()''