如何在HTML中将emoji代码:wave:解析为emoji

Question

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

在Angular/HTML/ts/js中，有没有一种简单而快速的方法可以在不切分字符串的情况下做到这一点？

提前感谢您:)

Answer 1

我使用了NPM package Namindu建议并实现了一个管道来翻译包含表情符号代码的文本，以显示表情符号而不是代码，因为这个包只提供了一个表情符号选择器。

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;
  }

}

Answer 2

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