如何将表情符号代码 :wave: 解析为 HTML 中的表情符号

Question

我想将常见的表情符号代码（如“:wave:”或“:+1:”）解析为实际的表情符号图片。

在 Angular/HTML/ts/js 中是否有一种简单快捷的方法可以在不对字符串进行切片的情况下执行此操作？

提前谢谢你:)

Answer 1

尝试使用 this NPM 包。可能对你有帮助。

Answer 2

我使用了 NPM package Namindu 建议并实现了一个管道来翻译包括 emoji-codes 在内的文本以显示表情符号而不是代码，因为该包仅提供 emoji-picker。

export class EmojiTranslatePipe implements PipeTransform {

  constructor(private emojiService: EmojiService) {
  }

  transform(value: string, args?: any): string {
    let subs = value.split(":");
    subs.forEach(s => {
      let emoji = this.findEmoji(s);
      if (emoji) {
        let emojiCode = `:${s}:`;
        value = value.replace(emojiCode, emoji);
      }
    });
    return value;
  }

  findEmoji(id: string): string | undefined {
    let emoji = this.emojiService.emojis.find(emoji => emoji.id == id);
    if (emoji) {
      return emoji.native;
    }
    return undefined;
  }

}

如何将表情符号代码 :wave: 解析为 HTML 中的表情符号

How to resolve emoji-codes :wave: into emojis in HTML

html

javascript

emoji

typescript

angular