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

有图为证：

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

就是这么个聊天时发布关键词或者 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 就完活了。

不过为了实现之前说的，假设不输入 emoji 只是某些字段也可以触发，那我们可以先创建一个对象来存储要匹配的词组和对应的 emoji，如下：

// 创建对象存储匹配词组和对应的 emoji
const keywordToEmoji = {
  生日快乐: "\u{1F382}", // 蛋糕 emoji
  恭喜发财: "\u{1F9E7}"  // 红包 emoji
  // 添加更多词组和对应 emoji
}

然后再遍历关键词组映射对象，就齐活了。

// 检查输入文本中是否有匹配词组
for (const [keyword, emoji] of Object.entries(keywordToEmoji)) {
      if (commentText.includes(keyword)) {
        // 设置固定数量的 emoji
        const fixedEmojiCount = 10;
        for (let i = 0; i < fixedEmojiCount; i++) {
          setTimeout(() => {
            
          // 放入前面的 emoji 生成 div 函数，或者将生成 div 打包为一个函数直接调用

          }, delay * 100); // 每个 emoji 的下落延迟时间
          delay++;
        }
      }
}

这样就实现了在没有 emoji 的情况下，我们也可以检查某些词组来触发特效，最后再加上监听评论 Ajax 事件或者按钮事件之类，就可以成功触发上面的函数了。

// 监听评论提交事件，typecho 示例：
document.addEventListener("typechoCommentPosted", function (e) {
  if (e.detail.status === "success") {
    checkForEmoji(e.detail.text);
  }
});

当然最后别忘了加上你喜欢的 css，结束！

.emoji-container{
  position: fixed;
  top: -20%;
  right: 50%;
  transform: translateX(50%);
  width: 40px;
  height: 40px;
  font-size:40px;
  border-radius: 50%;
  animation-name: riseUp;
  animation-duration: 8s;
  animation-fill-mode: both;
  z-index: 9999999;
}
@keyframes riseUp {
  0% { top: -20%; opacity: 0; }
  40% { top: 60%; opacity: 1; }
  80% { top: 90%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

基本上整体思路和逻辑就是这样，不过实际应用中，我们可能要考虑到更多问题，例如是/否只含有 emoji，含有 emoji 的情况下是/否含有关键词，是/否只含有关键词等情况等等。

目前我大概的逻辑就是如果只含有多个 emoji，就随机选取多个 emoji，如果同时含有 emoji 和关键词，就一起显示。

效果图就不放了，可以评论区试试，哈哈。

关键词目前也设置了几个，也许哪天你评论的时候就会触发哈~

收工，关机，明天周末啦，周末愉快各位！