【JS】替换文本为emjio表情
最终效果展示
T1

T2

T3

T4

需求
- 把评论
你好帅啊啊啊[开心][开心],[开心] 替换为图片
思路
- 正则match提取
[开心]到一个数组 - 数组去重
- 创建img标签
- img标签转文本. 。例:
(el.outerHTML),将el元素转文本 - 字符串replaceAll方法替换表情文本为标签转换的文本
- 使用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>
效果图

相关文章:
【JS】替换文本为emjio表情
最终效果展示 T1 T2 T3 T4 需求 把评论你好帅啊啊啊[开心][开心],[开心] 替换为图片 思路 正则match提取[开心]到一个数组数组去重创建img标签img标签转文本. 。例:(el.outerHTML),将el元素转文本字符串replaceAll…...
Solr完结版
Solr是基于Apache Lucene构建的用于搜索和分析的开源解决方案。提供可拓展索引、搜索功能、高亮显示和文字解析功能。本质是一个java web项目,内嵌Jetty服务器,安装方便。 请求Solr中的控制器,处理完数据后把结果相应给客户端 正向索引&#…...
外包干了5天,技术退步明显。。。。
说一下自己的情况,本科生,19年通过校招进入广州某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&a…...
Cronos zkEVM 基于 Covalent Network(CQT)数据可用性 API,推动其 Layer2 DeFi 生态更好地发展
在一项旨在显著改善 DeFi 生态的战略举措中,Cronos 与 Covalent Network(CQT)携手合作,以期待 Cronos zkEVM 的推出。这一整合,预计将进一步降低以太坊生态系统的交易成本、提升交易速度,并带来更好的交易体…...
基于SpringBoot的高校办公室行政事务管理系统
采用技术 基于SpringBoot的高校办公室行政事务管理系统的设计与实现~ 开发语言:Java 数据库:MySQL 技术:SpringBootMyBatis 工具:IDEA/Ecilpse、Navicat、Maven 页面展示效果 功能清单 教师信息管理 办公室管理 办公物资管…...
Linux系统及操作 (04)
Linux系统及操作 (03) RPM 软件包 网络下载对应软件包光盘镜像文件,具备软件包 Windows 系统软件包的管理 可以指定安装位置安装是集中安装到一个目录Linux 系统 与 Windows 系统相反。 常见的软件包(生态)类型 电脑入侵99%都是通过软件…...
粒子群算法 - 目标函数最优解计算
粒子群算法概念 粒子群算法 (particle swarm optimization,PSO) 由 Kennedy 和 Eberhart 在 1995 年提出,该算法模拟鸟群觅食的方法进行寻找最优解。基本思想:人们发现,鸟群觅食的方向由两个因素决定。第一个是自己当初飞过离食物…...
关于MySQL数据库的学习3
目录 前言: 1.DQL(数据查询语言): 1..1基本查询: 1.2条件查询: 1.3排序查询: 1.3.1使用ORDER BY子句对查询结果进行排序。 1.3.2可以按一个或多个列进行排序,并指定排序方向(升序ASC或降序DESC&#…...
笔试题——得物春招实习
开幕式排练 题目描述 导演在组织进行大运会开幕式的排练,其中一个环节是需要参演人员围成一个环形。演出人员站成了一圈,出于美观度的考虑,导演不希望某一个演员身边的其他人比他低太多或者高太多。 现在给出n个参演人员的身高,问…...
动手做简易版俄罗斯方块
导读:让我们了解如何处理形状的旋转、行的消除以及游戏结束条件等控制因素。 目录 准备工作 游戏设计概述 构建游戏窗口 游戏方块设计 游戏板面设计 游戏控制与逻辑 行消除和计分 判断游戏结束 界面美化和增强体验 看看游戏效果 准备工作 在开始编码之前…...
【极简无废话】open3d可视化torch、numpy点云
建议直接看文档,很多都代码老了,注意把代码版本调整到你使用的open3d的版本: https://www.open3d.org/docs/release/tutorial/visualization/visualization.html 请注意open3d应该已经不支持centos了! 从其他格式转换成open3d…...
C语言经典算法-6
文章目录 其他经典例题跳转链接31.数字拆解32.得分排行33.选择、插入、气泡排序34.Shell 排序法 - 改良的插入排序35.Shaker 排序法 - 改良的气泡排序 其他经典例题跳转链接 C语言经典算法-1 1.汉若塔 2. 费式数列 3. 巴斯卡三角形 4. 三色棋 5. 老鼠走迷官(一&…...
【计算机考研】杭电 vs 浙工大 怎么选?
想求稳上岸的话,其他几所学校也可以考虑,以留在本地工作的角度考虑,这几所学校都能满足你的需求。 如果之后想谋求一份好工作,肯定优先杭电是比较稳的,当然复习的时候也得加把劲。 这个也可以酌情考虑,报…...
激活函数
优秀的激活函数: 非线性:激活函数非线性时,多层神经网络可逼近所有函数 可微性:梯度下降更新参数 单调性:当激活函数是单调的,能保证单层网络的损失函数是凸函数 近似恒等性:当参数初始化为…...
使用Jackson进行 JSON 序列化和反序列化
在Spring应用程序中,您可以通过Maven添加Jackson依赖,并创建一个工具类来封装对象的序列化和反序列化方法。以下是详细步骤: 1. 引入 Jackson 依赖 如果使用 Maven,您可以在 pom.xml 文件中添加以下依赖: <depend…...
Linux/Uinx 系统编程:定时器以及时钟同步
本章讨论了定时器和定时器服务;介绍了硬件定时器的原理和基于Intel x86 的PC中的硬件定时器;讲解了CPU操作和中断处理;描述了Linux中与定时器相关的系统调用、库函数和定时器服务命令;探讨了进程间隔定时器、定时器生成的信号,并通过示例演示了进程间隔定时器。编程…...
(Ubuntu中调用相机花屏)Astra plus深度相机--rgb彩色图像花屏解决方法之一
在调试深度相机的过程中只能能调出深度图像和红外图像 在rviz的image的topic中选择彩色图像的话题不显示图像 1、查看相机的usb序列号 lsusb如上图所示,此相机的USB序列号是2bc5:050f,2bc5:060f 其中050f是显示彩色图像的 在这里可通过拔插相机来确定序列号是哪几…...
iPaaS平台能帮助企业解决什么问题?
随着数字化转型的推进,越来越多的企业开始关注如何提高业务效率和灵活性。iPaaS作为一种新型集成平台,它能够帮助企业解决许多与应用程序和数据集成相关的问题。 它能给企业解决什么问题? 以下是 iPaaS 平台通常能够帮助企业解决的一些问题…...
数学建模(灰色关联度 python代码 案例)
目录 介绍: 模板: 案例:哪些原因影响结婚率 数据标准化: 灰色关联度系数: 完整代码: 结果: 介绍: 灰色关联度是一种多指标综合评价方法,用于分析和评价不同指标之…...
【DP】第十四届蓝桥杯省赛C++ B组《接龙数列》(C++)
【题目描述】 对于一个长度为 K 的整数数列:A1,A2,...,AK,我们称之为接龙数列当且仅当 的首位数字恰好等于 的末位数字 (2≤i≤K)。 例如 12,23,35,56,61,11 是接龙数列;12,23,34,56 不是接龙数列,因为 56 的首位数字不等于 3…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
Unity VR/MR开发-VR开发与传统3D开发的差异
视频讲解链接:【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么? 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元(地址),其核心含义与能力如下: 1. 核心定义 地址位宽:CPU或内存控制器用32位…...
