im-ui-mobile/utils/emoji.js

A Vue3.0 + Typescript instant messaging component library for Uniapp

import { configManager } from './config.js'

/**
 * 表情工具类
 */
class Emoji {
  /**
   * 构造函数
   * @param {Object} options - 配置选项
   * @param {string} options.emojiUrl - 表情图片基础URL
   */
  constructor(options = {}) {
    // 表情图片基础URL
    this.emojiUrl = configManager.get('emojiUrl', 'url not found from awear.');

    // 表情文本列表
    this.emoTextList = [
      '憨笑', '媚眼', '开心', '坏笑', '可怜', '爱心', '笑哭', '拍手', '惊喜', '打气',
      '大哭', '流泪', '饥饿', '难受', '健身', '示爱', '色色', '眨眼', '暴怒', '惊恐',
      '思考', '头晕', '大吐', '酷笑', '翻滚', '享受', '鼻涕', '快乐', '雀跃', '微笑',
      '贪婪', '红心', '粉心', '星星', '大火', '眼睛', '音符', "叹号", "问号", "绿叶",
      "燃烧", "喇叭", "警告", "信封", "房子", "礼物", "点赞", "举手", "拍手", "点头",
      "摇头", "偷瞄", "庆祝", "疾跑", "打滚", "惊吓", "起跳"
    ];

    // 正则表达式匹配表情文本
    this.regex = /\#[\u4E00-\u9FA5]{1,3}\;/gi;
  }

  /**
   * 检查内容是否包含表情符号
   * @param {string} content - 要检查的文本内容
   * @returns {boolean} 是否包含表情符号
   */
  containEmoji(content) {
    return this.regex.test(content);
  }

  /**
   * 将文本中的表情符号转换为图片标签
   * @param {string} content - 要转换的文本内容
   * @param {string} extClass - 图片的 CSS 类名
   * @returns {string} 转换后的 HTML 字符串
   */
  transform(content, extClass = '') {
    return content.replace(this.regex, (emoText) => {
      // 将匹配结果替换表情图片
      const word = emoText.replace(/\#|\;/gi, '');
      const idx = this.emoTextList.indexOf(word);

      if (idx === -1) {
        return emoText;
      }

      const path = this.textToPath(emoText);
      const img = `<img src="${path}" class="${extClass}" alt="${word}" />`;
      return img;
    });
  }

  /**
   * 将表情文本转换为图片路径
   * @param {string} emoText - 表情文本，格式如 "#开心;"
   * @returns {string} 表情图片的完整路径
   */
  textToPath(emoText) {
    const word = emoText.replace(/\#|\;/gi, '');
    const idx = this.emoTextList.indexOf(word);

    // 如果找不到对应的表情，返回空字符串
    if (idx === -1) {
      return '';
    }
    return this.emojiUrl + idx + ".gif";
  }

  /**
   * 将表情图片路径转换为表情文本
   * @param {string} path - 表情图片路径
   * @returns {string} 表情文本，格式如 "#开心;"
   */
  pathToText(path) {
    if (!path || !this.emojiUrl || !path.includes(this.emojiUrl)) {
      return '';
    }

    try {
      // 从路径中提取表情索引
      const filename = path.replace(this.emojiUrl, '').replace('.gif', '');
      const index = parseInt(filename);

      // 检查索引是否有效
      if (isNaN(index) || index < 0 || index >= this.emoTextList.length) {
        return '';
      }

      // 获取对应的表情文本
      const emojiText = this.emoTextList[index];
      return `#${emojiText};`;
    } catch (error) {
      console.error('转换表情路径失败:', error);
      return '';
    }
  }

  /**
   * 获取表情文本列表
   * @returns {string[]} 表情文本列表
   */
  getEmoTextList() {
    return [...this.emoTextList];
  }

  /**
   * 根据索引获取表情文本
   * @param {number} index - 表情索引
   * @returns {string} 表情文本（不含#和;）
   */
  getEmojiTextByIndex(index) {
    if (index < 0 || index >= this.emoTextList.length) {
      return '';
    }
    return this.emoTextList[index];
  }

  /**
   * 根据文本获取表情索引
   * @param {string} text - 表情文本（不含#和;）
   * @returns {number} 表情索引，-1表示未找到
   */
  getIndexByText(text) {
    return this.emoTextList.indexOf(text);
  }

  /**
   * 获取表情总数
   * @returns {number} 表情总数
   */
  getEmojiCount() {
    return this.emoTextList.length;
  }

  /**
   * 静态方法：创建默认实例
   * @param {string} emojiUrl - 表情图片基础URL
   * @returns {Emoji} 表情工具实例
   */
  static create(emojiUrl) {
    return new Emoji({ emojiUrl });
  }
}

export default Emoji