让文章内的Emoji也动起来。
让文章内的Emoji也动起来。
2024-08-29
💡
不过这种方式似乎有被注入的风险，现在换成在SSG工具中进行替换，代码是同样的。
❤️❤️❤️
在前文 使用动态 Emoji 一文中提到了我是如何添加动态Emoji表情到Artalk中的。
但是，最近发现有一些朋友可能会直接通过输入法输入Emoji，而我的文章中也经常会使用Emoji，这导致了很多可以动的Emoji没有动起来。
所以又在这个上面拓展了一下，这次把文章内、Artalk评论用户自己输入的Emoji也全都做了替换。
构想的实现步骤如下
- 通过js的正则获取页面内文章主体、Artalk评论元素中的Emoji字符
- 使用这些字符去我的Emoji.json内匹配
- 匹配到数据就替换成img标签
根据以上构思结合Kimi，得到了以下代码，代码功能和使用方式直接通过注释写在下方代码块中。
//定义一个替换函数，接受一个需要替换的Node数组 function replceEmoji(list){ // 定义获取Emoji的正则 const emojiRegex = /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2694-\u2697]|\uD83E[\uDD10-\uDD5D])/g;
// 使用fetch请求emoji.json fetch('/assets/emoji.json') .then(response => { // 首先检查响应状态 if (!response.ok) { throw new Error('Network response was not ok'); } // 解析JSON数据 return response.json(); }) .then(data => { // 将数据存到变量中 let emojis = data;
// 遍历传入的Node元素 list.forEach(function(el){ // 通过正则获取所有emoji let finds = el.innerHTML.match(emojiRegex); // 没找到数据则跳过本次循环 if(!finds){return} // 遍历所有找到的emoji finds.forEach(function(i){ // 看这个emoji是否有动态版本 let temp = emojis.items.find(item => item.icon === i)
if(temp){
// 如果有就替换成img标签
el.innerHTML = el.innerHTML.replaceAll(i,"")
}
})
}) }) .catch(error => { // 处理任何在请求过程中发生的错误 console.error('There was a problem with the fetch operation:', error); }); }
// 将所有文章进行替换 replceEmoji(document.querySelectorAll('.post'));
// artalk评论加载完毕的回调 artalk.on("list-loaded", function () { // 为所有评论替换emoji replceEmoji(document.querySelectorAll('.atk-body')); })
