给评论来点大爆炸吧！

前段时间突然发现评论拦截插件貌似有些问题，花了半天的时候修复了下，然后和若志随笔闲扯的时候搞出来个话题，哈哈。

笑死，你能想象两个大男人在互相发我爱你触发满屏特效么。

就是这么个聊天时发布关键词或者 emoji 触发满屏特效的小功能，我觉得很有趣，可以一搞！（虽然没几个人在我博客评论，哈哈哈哈。。）

好了，话不多说，本来打算用 php 撸的，但是发现不太好搞，换成了 JS，最后用了个简单的方法（应该或许肯定是会有某些BUG，哈哈），经过周末的折腾，暂时可以使用了，下面直接开始：

首先第一步，搞个 emoji 的编码库，换了好几个，之前的貌似手机上有些 emoji 无法识别，下面这个暂时试了基本上都可以识别，不排除有个别哈。

//emoji Unicode 编码
function hasEmoji(text) {
  var emojiRegex =
    /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ude01|\ude02|\ude04|\ude05|\ude06|\ude07|\ude08|\ude09|\ude0a|\ude0b|\ude0c|\ude0d|\ude0f|\ude11|\ude13|\ude15|\ude17|\ude19|\ude1b|\ude1d|\ude1f|\ude21|\ude22|\ude24|\ude27|\ude29|\ude2b|\ude2d|\ude2e|\ude32|\ude33|\ude35|\ude36|\ude37|\ude38|\ude39|\ude3a|\ude3b|\ude42|\ude47|\ude49|\ude4b|\ude4d|\ude4e|\ude4f|\ude80|\ude81|\ude82|\ude84|\ude87|\ude88|\ude89|\ude8a|\ude8b|\ude8c|\ude8d|\ude8e|\ude91|\ude92|\ude93|\ude94|\ude95|\ude97|\ude99|\ude9a|\ude9b|\ude9d|\ude9f|\udea1|\udea2|\udea3|\udea5|\udea6|\udea7|\udea8|\udea9|\udeab|\udeac|\udead|\udeae|\udeaf|\udeb0|\udeb1|\udeb2|\udeb3|\udeb4|\udeb5|\udeb6|\udeb7|\udeb8|\udeb9|\udeba|\udebb|\udebc|\udebd|\udebe|\udebf|\udec0|\udec1|\udec2|\udec3|\udec4|\udec5|\udec6|\udec7|\udec8|\udec9|\udeca|\udecb|\udecd|\udece|\udecf|\uded0|\uded1|\uded2|\uded3|\uded4|\uded5|\uded6|\uded7|\uded8|\uded9|\udeda|\udedb|\udedc|\udedd|\udede|\udedf|\udee0|\udee1|\udee2|\udee3|\udee4|\udee5|\udee6|\udee7|\udee8|\udee9|\udeea|\udeeb|\udeec|\udeed|\udeee|\udeef|\udef0|\udef1|\udef2|\udef3|\udef4|\udef5|\udef6|\udef7|\udef8|\udef9|\udefa|\udefb|\udefc|\udefd|\udefe|\udf00|\udf01|\udf02|\udf03|\udf04|\udf05|\udf06|\udf07|\udf08|\udf09|\udf0a|\udf0b|\udf0c|\udf0d|\udf0e|\udf0f|\udf10|\udf11|\udf12|\udf13|\udf14|\udf15|\udf16|\udf17|\udf18|\udf19|\udf1a|\udf1b|\udf1c|\udf1d|\udf1e|\udf1f|\udf20|\udf21|\udf22|\udf23|\udf24|\udf25|\udf26|\udf27|\udf28|\udf29|\udf2a|\udf2b|\udf2c|\udf2d|\udf2e|\udf2f|\udf30|\udf31|\udf32|\udf33|\udf34|\udf35|\udf36|\udf37|\udf38|\udf39|\udf3a|\udf3b|\udf3c|\udf3d|\udf3e|\udf3f|\udf40|\udf41|\udf42|\udf43|\udf44|\udf45|\udf46|\udf47|\udf48|\udf49|\udf4a|\udf4b|\udf4c|\udf4d|\udf4e|\udf4f|\udf50|\udf51|\udf52|\udf53|\udf54|\udf55|\udf56|\udf57|\udf58|\udf59|\udf5a|\udf5b|\udf5c|\udf5d|\udf5e|\udf5f|\udf60|\udf61|\udf62|\udf63|\udf64|\udf65|\udf66|\udf67|\udf68|\udf69|\udf6a|\udf6b|\udf6c|\udf6d|\udf6e|\udf6f|\udf70|\udf71|\udf72|\udf73|\udf74|\udf75|\udf76|\udf77|\udf78|\udf79|\udf7a|\udf7b|\udf7c|\udf7d|\udf7e|\udf7f|\udf80|\udf81|\udf82|\udf83|\udf84|\udf85|\udf86|\udf87|\udf88|\udf89|\udf8a|\udf8b|\udf8c|\udf8d|\udf8e|\udf8f|\udf90|\udf91|\udf92|\udf93|\udf94|\udf95|\udf96|\udf97|\udf98|\udf99|\udf9a|\udf9b|\udf9c|\udf9d|\udf9e|\udf9f|\udfa0|\udfa1|\udfa2|\udfa3|\udfa4|\udfa5|\udfa6|\udfa7|\udfa8|\udfa9|\udfaa|\udfab|\udfac|\udfad|\udfae|\udfaf|\udfb0|\udfb1|\udfb2|\udfb3|\udfb4|\udfb5|\udfb6|\udfb7|\udfb8|\udfb9|\udfba|\udfbb|\udfbc|\udfbd|\udfbe|\udfbf|\udfc0|\udfc1|\udfc2|\udfc3|\udfc4|\udfc5|\udfc6|\udfc7|\udfc8|\udfc9|\udfca|\udfcb|\udfcc|\udfcd|\udfce|\udfcf|\udfd0|\udfd1|\udfd2|\udfd3|\udfd4|\udfd5|\udfd6|\udfd7|\udfd8|\udfd9|\udfda|\udfdb|\udfdc|\udfdd|\udfde|\udfdf|\udfe0|\udfe1|\udfe2|\udfe3|\udfe4|\udfe5|\udfe6|\udfe7|\udfe8|\udfe9|\udfea|\udfeb|\udfec|\udfed|\udfee|\udfef|\udff0|\udff1|\udff2|\udff3|\udff4|\udff5|\udff6|\udff7|\udff8|\udff9|\udffa|\udffb|\udffc|\udffd|\udffe|\udfff])/g;
  return text.match(emojiRegex);
}

下一步就是检查发布的评论内是否含有 emoji，如果含有就获取 emoji，并将其赋予到 div 中，展示在页面中，并在几秒后自动消失。

//检查文字是否含有 emoji，并添加 div
function checkForEmoji(commentText) {
  const emojis = hasEmoji(commentText);
  if (emojis && emojis.length > 0) {
    // 设置固定数量的 emoji，你也可以修改成随机数
    const fixedEmojiCount = 10;
    let delay = 0;
    for (let i = 0; i < fixedEmojiCount; i++) {
      setTimeout(() => {
        let container = document.createElement("div");
        container.className = "emoji-container";
        container.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
        // 找到 </body> 标签并将其添加到后面
        let bodyElement = document.querySelector("body");
        if (bodyElement) {
          bodyElement.appendChild(container);
        } else {
          document.body.appendChild(container);
        }
        // 设置随机的位置和大小
        container.style.right = `${Math.random() * (window.innerWidth - 100)}px`;
        container.style.top = `${Math.random() * (window.innerHeight - 100)}px`;
        container.style.width = `${Math.random() * 40 + 40}px`;
        container.style.height = `${Math.random() * 40 + 40}px`;
        container.style.lineHeight = `${Math.random() * 40 + 40}px`;
        container.style.fontSize = `${Math.random() * 40 + 40}px`;
      }, delay * 100); // 每个 emoji 的下落延迟时间
      delay++;
    }
    setTimeout(() => {
      Array.from(document.querySelectorAll(".emoji-container")).forEach(
        (container) => {
          container.remove();
        }
      );
    }, delay * 100 + 7000); // 等待所有 emoji 下落后再删除
  } else {
    // 如果没有找到 emoji，则移除可能存在的已显示的容器
    let existingContainer = document.querySelector(".emoji-container");
    if (existingContainer) {
      existingContainer.remove();
    }
  }
}

到这里其实基本功能就已经实现了，只要加上 css 就完活了。