让文章内的Emoji也动起来。

❤️❤️❤️

在前文 使用动态 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,"<img class='book-emoji' src='"+ temp.val +"'/>")
                }
            })
            
        })
      })
      .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'));
})