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

效果图