明石博客

明石博客



WeChatMsg 添加表情支持

明石 · 2023年12月10日 · 100浏览 · 技术


作者大大在此文章发表之前刚刚发布更新,更新中已添加了此项功能


WeChatMsg 是一个能迅速解密和导出微信聊天记录为crv、html等多种格式的开源软件。最近有些重要的聊天记录需要备份到电脑上,但是官方微信程序要加密这就很烦,只能还原到设备中,不能随时浏览,这款软件就很好地解决了痛点。但是导出的html聊天记录所有微信表情都是以 [旺财] 等形式显示,远不如 来的直观。所以就用js写了一个简单的字符串替换功能。

1. 首先在已导出的html文件中之前加入css片段,使其排版不乱:

.wechatEmoji {
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 4px;
  vertical-align: middle;
}

2. 然后找到html文件底部的js片段,从 function prevPage() { 开始往下覆盖代码直到第一个 </script> 出现。

function prevPage() {
    if (currentPage > 1) {
      currentPage--;
      renderPage(currentPage);
      wechatEmoji();
    }
  }

  function nextPage() {
    const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
    if (currentPage < totalPages) {
      currentPage++;
      renderPage(currentPage);
      wechatEmoji();
    }
  }
  function updatePaginationInfo() {
    const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
    const paginationInfo = document.getElementById('paginationInfo');
    paginationInfo.textContent = `共 ${totalPages} 页,当前第 ${currentPage} 页`;
  }
  function gotoPage() {
    const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
    const inputElement = document.getElementById('gotoPageInput');
    const targetPage = parseInt(inputElement.value);

    if (targetPage >= 1 && targetPage <= totalPages) {
      currentPage = targetPage;
      renderPage(currentPage);
      wechatEmoji();
    } else {
      alert('请输入有效的页码');
    }
  }

  // 初始化页面
  renderPage(currentPage);
  wechatEmoji();
  function wechatEmoji() {
    const chat = document.getElementById('chat-container');
    const text = chat.innerHTML;
    const emojiRegex = /\[(囧|玫瑰|旺柴|捂脸|加油|大哭|皱眉|害羞|可怜|快哭了|委屈|发呆|撇嘴|苦涩|呲牙|胜利|破涕为笑|发怒|得意|嘘|OK|烟花|耶|让我看看|拥抱|鼓掌|好的|社会社会|愉快|太阳|疑问|天啊|月亮|叹气|嘿哈|强|吃瓜|敲打|流泪|吐|尴尬|爱心|晕|机智|爆竹|庆祝|衰|亲亲|转圈|凋谢|抱拳|握手|弱|红包|蛋糕|Emm|猪头|666|阴险|奸笑|色|哇|坏笑|裂开|难过|微笑)\]/g;
    const emojiMap = {
      '囧': '../../wechatEmoji/31.png',
      '玫瑰': '../../wechatEmoji/101.png',
      '旺柴': '../../wechatEmoji/73.png',
      '捂脸': '../../wechatEmoji/82.png',
      '加油': '../../wechatEmoji/81.png',
      '大哭': '../../wechatEmoji/43.png',
      '皱眉': '../../wechatEmoji/83.png',
      '害羞': '../../wechatEmoji/40.png',
      '可怜': '../../wechatEmoji/4.png',
      '快哭了': '../../wechatEmoji/2.png',
      '委屈': '../../wechatEmoji/5.png',
      '发呆': '../../wechatEmoji/37.png',
      '撇嘴': '../../wechatEmoji/35.png',
      '苦涩': '../../wechatEmoji/65.png',
      '呲牙': '../../wechatEmoji/47.png',
      '胜利': '../../wechatEmoji/92.png',
      '破涕为笑': '../../wechatEmoji/61.png',
      '发怒': '../../wechatEmoji/45.png',
      '得意': '../../wechatEmoji/38.png',
      '嘘': '../../wechatEmoji/15.png',
      'OK': '../../wechatEmoji/88.png',
      '烟花': '../../wechatEmoji/60.png',
      '耶': '../../wechatEmoji/92.png',
      '让我看看': '../../wechatEmoji/67.png',
      '拥抱': '../../wechatEmoji/50.png',
      '鼓掌': '../../wechatEmoji/14.png',
      '好的': '../../wechatEmoji/72.png',
      '社会社会': '../../wechatEmoji/74.png',
      '愉快': '../../wechatEmoji/27.png',
      '太阳': '../../wechatEmoji/96.png',
      '疑问': '../../wechatEmoji/20.png',
      '天啊': '../../wechatEmoji/76.png',
      '月亮': '../../wechatEmoji/97.png',
      '叹气': '../../wechatEmoji/66.png',
      '嘿哈': '../../wechatEmoji/84.png',
      '强': '../../wechatEmoji/95.png',
      '吃瓜': '../../wechatEmoji/109.png',
      '敲打': '../../wechatEmoji/10.png',
      '流泪': '../../wechatEmoji/39.png',
      '吐': '../../wechatEmoji/29.png',
      '尴尬' : '../../wechatEmoji/44.png',
      '爱心': '../../wechatEmoji/103.png',
      '晕': '../../wechatEmoji/19.png',
      '机智': '../../wechatEmoji/78.png',
      '爆竹': '../../wechatEmoji/59.png',
      '庆祝': '../../wechatEmoji/58.png',
      '衰': '../../wechatEmoji/18.png',
      '亲亲': '../../wechatEmoji/6.png',
      '转圈': '../../wechatEmoji/87.png',
      '凋谢': '../../wechatEmoji/99.png',
      '抱拳': '../../wechatEmoji/91.png',
      '握手': '../../wechatEmoji/93.png',
      '弱': '../../wechatEmoji/94.png',
      '红包': '../../wechatEmoji/51.png',
      '蛋糕': '../../wechatEmoji/105.png',
      'Emm': '../../wechatEmoji/75.png',
      '猪头': '../../wechatEmoji/100.png',
      '666': '../../wechatEmoji/68.png',
      '阴险': '../../wechatEmoji/3.png',
      '奸笑': '../../wechatEmoji/85.png',
      '色': '../../wechatEmoji/36.png',
      '哇': '../../wechatEmoji/70.png',
      '坏笑': '../../wechatEmoji/11.png',
      '裂开': '../../wechatEmoji/64.png',
      '难过': '../../wechatEmoji/32.png',
      '微笑': '../../wechatEmoji/34.png'
    };

    const newText = text.replace(emojiRegex, (match, emoji) => {
      return `<img class="wechatEmoji" src="${emojiMap[emoji]}" alt="" />`;
    });
    chat.innerHTML = newText;
  }

3. 以下文件请下载解压后命名文件夹为“wechatEmoji”然后放在与image、聊天记录同级的文件夹内。

下载表情文件

(是从微信文件传输助手的网页端下载的,仅供学习交流使用,深圳市腾讯计算机系统有限公司版权所有)

ps. 我不懂python所以无法直接修改程序在生成html的时候就加入,只能事后再修改,这样比较麻烦。给作者大大发个消息看他怎么改一下吧哈哈哈;
js里面emojiMap排序是用chatGPT帮我排序的,人写的话实在要写死;
表情文件夹里的表情是全的,但是我在js里只根据我和某人的聊天中使用的表情匹配了一部分,有需要的朋友可以再添加。





comment 评论区

添加新评论



  • ©2024 bilibili.com

textsms
内容不能为空
account_circle
昵称不能为空
email
邮件地址格式错误
web
beach_access
验证码不能为空



已有 2 条评论

  1. 豆豆    

    23-12-20 13:52 (回复)


  2. Echo    

    23-12-12 12:18 (回复)

    又学到一手