h5(即浏览器客户端,使用js)环境下,emoji表情图片转unicode编码怎么实现

发布于 2022-09-06 12:46:13 字数 928 浏览 21 评论 0

编码环境:vue-cli,emoji
背景:unicode转图片已实现,表情图片的名称本身就是该表情的unicode码有关(有现成方法通过表情的utf8码找到对应的图片名称),有一个对应的类似数据字典文件config.js,关键内容大体如下:
config:[

{
  imgNum: 1,
  text: '哈哈',
  unicode: '?'
},
{
  imgNum: 2,
  text: '大笑',
  unicode: '?'
},
...
生成的表情html图片字符串已实现,例如

let str = '测试啊<img width="18" class="emoji" src="../../../assets/images/emoji/1f604.png">测试<img width="18" class="emoji" src="../../../assets/images/emoji/1f603.png"><img width="18" class="emoji" src="../../../assets/images/emoji/1f603.png">测试';

具体问题:怎样将上面的html字符串转换成:'测试啊?测试??测试',以方便发给后台处理,我需要一个方法完成这就事情,但是js功力不是很强,不知道怎么写的好
:由于需要处理的字符串内容不是确定的,也就是不确定会有多少表情,表情在字符串的什么地方,可以的话请大神提供一个类似示例处理,我主要不清楚这部分逻辑该具体怎样写js
个人想法:我的处理思路是一是扩充前面的那个数据字典,比如对象里面新增图片名称字段,以方便找到img对应的utf8码,接上来可能是通过正则遍历、拆分、拼凑字符串,达到我的想要的结果,如果有更好的思路也欢迎大神多多指教。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

画离情绘悲伤 2022-09-13 12:46:13

还是自己想出了办法,这里的关键有两点:
1.渲染表情html代码的时候,每个表情图片的alt的属性值放入对应的config里面的text属性值,形成如下所示代码:

<img class="emoji" alt="哈哈" src="../static/emoji/1f604.png">测试测试<img class="emoji" alt="你懂的" src="../static/emoji/1f609.png"><img class="emoji" alt="你懂的" src="../static/emoji/1f609.png">

然后将该字符串的img字符串替换为表情字符,代码如下:

let oldMsg = '<img class="emoji" alt="哈哈" src="../static/emoji/1f604.png">测试测试<img class="emoji" alt="你懂的" src="../static/emoji/1f609.png"><img class="emoji" alt="你懂的" src="../static/emoji/1f609.png">'
let newMsg = oldMsg.replace(/<img[^>]*>/g,(match)=>{
    //截取alt里面的值,对应数据字典里面的text属性,可以遍历到对应的unicode码(uft8)
    let alt = match.split('" alt="')[1].split('" src="')[0]
    let text = ''
    for(let obj of EmojiUtil.config){
        if(obj.text == alt){
            text = obj.unicode
            break
        }
    }
    return text
})
console.log(newMsg)
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文