【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>

效果图