网站 动态 标签页,wordpress主题范例,建立公司网站,泰安人才网招聘信息港最终效果展示
T1 T2 T3 T4 需求
把评论你好帅啊啊啊[开心][开心]#xff0c;[开心] 替换为图片
思路
正则match提取[开心]到一个数组数组去重创建img标签img标签转文本. 。例#xff1a;#xff08;el.outerHTML#xff09;#xff0c;将el元素转文本字符串replaceAll…最终效果展示
T1 T2 T3 T4 需求
把评论你好帅啊啊啊[开心][开心][开心] 替换为图片
思路
正则match提取[开心]到一个数组数组去重创建img标签img标签转文本. 。例el.outerHTML将el元素转文本字符串replaceAll方法替换表情文本为标签转换的文本使用innerHTML渲染到页面
码
div idem/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效果图
