当前位置：首页 > news >正文

网站怎么推广怎么做的西安发布最新通知

news 2025/7/23 9:43:20

网站怎么推广怎么做的,西安发布最新通知,dw网站开发流程,在线做章网站最终效果展示 T1 T2 T3 T4 需求把评论你好帅啊啊啊[开心][开心]，[开心] 替换为图片思路正则match提取[开心]到一个数组数组去重创建img标签img标签转文本. 。例：（el.outerHTML），将el元素转文本字符串replaceAll…

最终效果展示

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>