【JS】替换文本为emjio表情

最终效果展示

T1

在这里插入图片描述

T2

在这里插入图片描述

T3

在这里插入图片描述

T4

在这里插入图片描述

需求

  • 把评论你好帅啊啊啊[开心][开心][开心] 替换为图片

思路

  1. 正则match提取[开心]到一个数组
  2. 数组去重
  3. 创建img标签
  4. img标签转文本. 。例:(el.outerHTML),将el元素转文本
  5. 字符串replaceAll方法替换表情文本为标签转换的文本
  6. 使用innerHTML渲染到页面

<div id='em'></div>
<script>
// emjio列表
const emjioList = [{name: '[开心]',src: 'public/emjio/1678782525035.gif'},{name: '[对不起]',src: 'public/emjio/1678782526027.gif'},// ..................................
]/**  数组去重* @param {Array} arr 去重的数组* @returns 返回去重的数组*/
const noReArr = (arr) => [...new Set(arr)]let 评论 = '你好帅啊啊啊[开心][开心]'
//1.正则提取表情 
const reg = new RegExp("\\[.*?]", "gi");
//2. 开始提取
const emjioStrArr = 评论.match(reg);
// 3. 数组去重
const noRepEmjioArr = noReArr(emjioStrArr) //6. 遍历表情
noRepEmjioArr.forEach(it => {
// 4. 创建img标签
const createImg = document.createElement("img");   // 5. 找到对应表情图片地址
const { src } = emjioList.find(it2 => it2.name === it);
// 6. 设置表情图片地址
createImg.src = src // 7. img标签转字符串
const imgElToString = createImg.outerHTML;// 8.替换表情为img标签字符串
评论 = 评论.replaceAll(it, imgElToString);
});// 9.将替换的字符渲染到id为em的元素里
document.getElementById('em').innerHTML = 评论
</script>

效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/761051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyintaller用法详解

本文使用创作助手。 pyinstaller是一个用于将Python脚本打包为独立可执行文件的工具。它可以将Python代码和依赖的库一起打包成一个可执行文件&#xff0c;这样就不需要安装Python解释器和相关依赖库即可运行脚本。 下面是pyinstaller的用法详解&#xff1a; 安装pyinstaller…

js【详解】深拷贝

什么是深拷贝&#xff1f; 对于引用类型的数据&#xff0c;才有深浅拷贝的说法 浅拷贝 &#xff1a;执行拷贝的变量只复制被拷贝变量内存的引用数据的地址。 被拷贝变量内地址指向的数据发生变化时&#xff0c;执行拷贝的变量也会同步改变 深拷贝&#xff1a; 在堆内存中开…

如何在edge上安装拓展weTab

1.点解管理拓展 2.点击获取拓展 3.搜索框输入"wetab"并搜索 4.点击获取按钮 5.点击之后跳出弹窗,点击"添加拓展" 6.回到拓展页面,找到wetab拓展,点击右侧启动拓展 7.打开新的界面,wetab已经启动 8.自定义界面 1. 右键图标可以进行删除操作 2.左下角有个设…

Kubernetes集群搭建 kubernetes集群安装

Kubeadm kubeadm 是 Kubernetes 社区提供的集群构建工具&#xff0c;它能够以最佳实践的方式部署一个最小化的可用 Kubernetes 集群。 但是 kubeadm 在设计上并未安装网络解决方案&#xff0c;所以需要用户自行安装第三方符合 CNI 的网络解决方案&#xff0c;如 flanal&#…

C++特性三:多态---纯析构和纯虚析构

多态使用时&#xff0c;如果子类中有属性开辟到堆区&#xff0c;那么父类指针在释放时无法调用到子类的析构代码 解决方式&#xff1a;将父类中的析构函数改为虚析构或者纯虚析构 虚析构和纯虚析构共性&#xff1a; 1.可以解决父类指针释放子类对象 2.都需要有具体的函数实现…

【Python + Django】启动简单的文本页面

前言&#xff1a; 为了应付&#xff08;bushi&#xff09;毕业论文&#xff0c;总要自己亲手搞一个像模像样的项目出来吧 ~ ~ 希望自己能在新的连载中学到项目搭建的知识&#xff0c;这也算是为自己的测试经历增添光彩吧&#xff01;&#xff01;&#xff01; 希望、希望大家…

Qt | QWidget 自定义消息处理函数(捕获调试信息),调试和测试必不可少

# 01 函数qInstallMessageHandler qInstallMessageHandler 是 Qt 中用于安装自定义消息处理函数的函数。在 Qt 应用程序中,可以使用 qInstallMessageHandler 来接管 Qt 的消息输出,以便自定义消息的处理和记录。 #02 myMessageOutput(QtMsgType type, const QMessageLogCont…

你的电脑打不开摄像头问题

我一直以为我电脑上的摄像头老是打不开是因为硬件不匹配的问题。知道我发现了我的拯救者Y7000的机身盘边的“摄像头开关”按钮。。。 我去&#xff0c;你的摄像头开关按钮怎么设置在机身旁边啊。。。。 —————————————————————— 2024年3月21日更新记录&a…

[falsk]flask加载项目配置的两种方式

Flask项目配置&#xff08;Configuration&#xff09; - 知乎 (zhihu.com) 在Flask项目中&#xff0c;我们会用到很多配置&#xff08;Config&#xff09;。比如说设置秘钥&#xff0c;设置数据库地址&#xff0c;像下面这样&#xff1a; ... app.config[SECRET_KEY] some s…

UE5.3 StateTree使用实践

近期浏览UE的CitySample&#xff08;黑客帝国Demo&#xff09;&#xff0c;发现有不少逻辑用到了StateTree学习一下&#xff0c;StateTree是多层状态机实现&#xff0c;以组件的形式直接挂载在蓝图中运行。 与平时常见的一些FSM库不同&#xff0c;StateTree并不会返回给外界当…

【Git】第二课:git安装和配置

安装 我们伟大祖国有句古话叫巧妇难为无米之炊&#xff0c;还有句话叫工欲善其事必先利其器。所以&#xff0c;在正式的学习之前&#xff0c;我们需要先把git这把利器安装好。 Windows系统 下载安装包 打开Git - Downloading Package页面&#xff0c;根据系统类型32位还是6…

基于C/C++的easyx图形库教程

文章目录: 一&#xff1a;前言 二&#xff1a;窗口&#xff08;宽高 背景颜色 窗口标题 弹出对话框&#xff09; 三&#xff1a;图形绘制&#xff08;点 线 矩形 圆 椭圆&#xff09; 四&#xff1a;文字&#xff08;颜色 大小 背景 位置 打印 文字居中&#xff09; 五&a…

二分算法总结

二分算法总结 一、求大于当前数的第一个数的下标二、求小于当前数的第一个数的下标 一、求大于当前数的第一个数的下标 int l 0, r n; while (l < r) { int mid l r >> 1;if (nums[mid] > cur) r mid;else l mid 1; } cout << l << endl; // 不…

vue3 reactive丢失响应式

问题 使用 reactive 构造响应式对象时&#xff0c;当对其进行重新赋值后&#xff0c;会导致原有变量失去响应式&#xff0c;页面不会发生联动更新 例如&#xff1a; 1、使用 reactive 定义一个响应式的对象变量 let data1 reactive({name: 小李,date: 2024-03-18,address: xx…

PS IDEA VSCode MySQL Linux快捷键 整理

望多多转发 Photoshop快捷键 Photoshop提供了大量的快捷键&#xff0c;以帮助用户提高工作效率和流程的流畅性。以下是一些详细的Photoshop快捷键列表&#xff0c;包括文件操作、编辑操作、工具箱、文字处理和其他常用功能&#xff1a; 文件操作 新建文档&#xff1a;CTRLN…

解读“CFMS中国闪存市场峰会”存储技术看点-1

昨天CFMS中国闪存市场峰会在深圳举行&#xff0c;小编本来计划前往现场参加&#xff0c;但由于有事冲突未能如期前往&#xff0c;非常遗憾&#xff01; 本次峰会的主题是“存储周期激发潜能”。在闪存市场的供需关系逐渐恢复正常的阶段&#xff0c;闪存市场如何发展变化&#x…

Vue字符串里的中文数字转换为阿拉伯数字

js字符串里的汉字数字转化为数字 <template><view><view><view class"inpbox" ><textarea v-model"voiceMane" input"convert" ></textarea></view></view></view> </template> &…

【视频异常检测】Delving into CLIP latent space for Video Anomaly Recognition 论文阅读

Delving into CLIP latent space for Video Anomaly Recognition 论文阅读 ABSTRACT1. Introduction2. Related Works3. Proposed approach3.1. Selector model3.2. Temporal Model3.3. Predictions Aggregation3.4. Training 4. Experiments4.1. Experiment Setup4.2. Evaluat…

flink自定义函数如何从崩溃中恢复数据

背景 flink 提供的标准算子已经实现了可以从之前的checkpoint中恢复数据 思考 程序开发中,通常会自定义函数和计算指标,比较复杂 实现 通常情况下实现 CheckpointedFunction 这个接口即可 统计词频的小例子 public class SumTestProcessFunction extends ProcessFunct…

自然语言处理实战项目28-RoBERTa模型在BERT的基础上的改进与架构说明,RoBERTa模型的搭建

大家好,我是微学AI,今天给大家介绍下自然语言处理实战项目28-RoBERTa模型在BERT的基础上的改进与架构说明,RoBERTa模型的搭建。在BERT的基础上,RoBERTa进行了深度优化和改进,使其在多项NLP任务中取得了卓越的成绩。接下来,我们将详细了解RoBERTa的原理、架构以及它在BERT…