# 让文章内的Emoji也动起来。

让文章内的Emoji也动起来。
===============

2024-08-29

[#编码](https://1900.live/tag/bian-ma/) , [#分享](https://1900.live/tag/share/)

![](https://images.unsplash.com/photo-1587483166702-bf9aa66bd791?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDN8fGVtb2ppJTIwJTdDJTIwY2h8ZW58MHx8fHwxNzI1MjYyMjYwfDA&ixlib=rb-4.0.3&q=80&w=2000)

💡

不过这种方式似乎有被注入的风险，现在换成在SSG工具中进行替换，代码是同样的。

❤️❤️❤️

在前文 [使用动态 Emoji](https://1900.live/shi-yong-dong-tai-emoji/?ref=cms.1900.live) 一文中提到了我是如何添加动态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'));
    })