前端js实现正则表情包内容替换

表情包实现

思路：通过全局正则针对文本内容走查，匹配到[嘿哈]文本表情包，通过创建div或者img标签，包裹将文本表情包替换成我们表情包的地址链接。

// 创建文件emoticon.js
import lottie from "lottie-web"; // 动画方法const emoticon = new Map([['[大笑]', {name: 'daxiao',src: 'https://url-daxiao.json' // 表情包地址}]]}// 根据资源文件生成正则匹配规则
const regExpFn = () => {let ruleStr = '';emoticon.forEach((val, key) => {const text = key.replace(/\[|\]/g, function (w: any): any {if (w === '[') {return '\\['} else if (w === ']') {return '\\]'}})ruleStr += text + '|'})ruleStr = ruleStr.substr(0, ruleStr.length - 1)return new RegExp(ruleStr, 'g')
}// 替换内容里的表情包
const emotiomReplace = (params = {}) => {const lottieWrap = {};const { content, id } = paramsconst result = content.replace(regExpFn(), (world, index) => {const type = world, lookId = id + '-' + index;if (lottieWrap[lookId]) return false;const div = document.getElementById(lookId)if (div && !div.innerHTML) {const path = emoticon.get(div.getAttribute('type')).srclottieWrap[lookId] = lottie.loadAnimation({container: div,renderer: 'svg',loop: true,path})}return `<div style="display: inline-block; width: 20px; height: 20px; margin: 0 1px; vertical-align: middle;" type="${type}" id="${lookId}"></div>`})return result;
}export {emotiomReplace
}

使用

import { emotiomReplace } from './emoticon.js'
<span v-html="emotiomReplace(后端数据)"></span>

前端js实现正则表情包内容替换相关推荐

html正则表达式怎么写用户名非空,js通过正则匹配没有内容的空标签
js 如何正则匹配没有内容的空标签并移除掉? 例如等等正则 /]*?)?>\s*?/ig html=' '+ '\n '+ '\n'+ '\n '+ '\n '+ '\n '+ '\n'+ ...
猿人学题库十六题——js加密_表情包+sojson6.0——满天坑
猿人学题库十六题--js加密_表情包+sojson6.0 1. 首先进入浏览器的开发者工具, 进去后首先还是无线debug ,找到 debugg 对应的行数,右击选择 never pause ...
前端 js 邮箱正则判断（支持多个邮箱判断）
话不多说,上代码: var regEmail = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da ...
js mysql替换_JavaScript_js使用正则实现ReplaceAll全部替换的方法，JS 字符串有replace() 方法。但这 - phpStudy...
js使用正则实现ReplaceAll全部替换的方法 JS 字符串有replace() 方法.但这个方法只会对匹配到的第一个字串替换. 如下例: New Document var str = " ...
华为云内容审核API调用前端 js uni-app
文章目录前言一.华为云的内容审核api的调用需要哪些东西? 二.使用步骤 1.先注册一个华为云的账号 2.申请内容审核服务 3.[华为云内容审核API的官方文档](https://support. ...
自己写个仿微博的表情包功能
** 自己写个仿微博的表情包功能 ** 前两天写微博系统尝试着写一个表情包系统如图所示: 主体思想是先把图片罗列出来,加上title和name属性,当点击图片时获取图片的name属性,附加在输入框文本 ...
“一日不斗，我浑身难受”，表情包斗图成瘾下的大市场
聊天无言对,斗图能长久.雪碧与阔乐,压惊必须有.暴漫蘑菇头,都没群主丑.真香奥利给,皮虾我们走.修仙入佛系,难逃单身狗.雪姨黄子韬,尔康张学友.心情不美丽,土拔鼠怒吼.没事斗斗图,结交好基友-- 网友 ...
ps导出gif颜色不对_PS の手绘《超详细的动态表情包新手绘制指南》
今年本命年想做个表情包,但是之前没有做过,在网上搜索教程时,没有找到很有用的.所以我大部分都是看很多喜欢的表情包,然后录屏逐帧来分析的. 在表情包做完后,想要做一个记录总结,分享给同样想做表情包的新手 ...
python爬表情包_【从零开始写爬虫一】批量下载表情包
序打算写个关于node的爬虫菜鸟教程,接下来将带大家一步一步写一个表情包爬虫,从获取页面,解析表情包链接, 清洗脏数据,下载表情包到本地.开始之前你需要有对chrome调试工具和ES6有一定了解,包 ...

前端js实现正则表情包内容替换

表情包实现

使用

前端js实现正则表情包内容替换相关推荐

最新文章

热门文章