编辑评论时如何让EmojioneArea移除图片标签并显示原生emoji？

你遇到的问题是EmojioneArea初始化时，没有把textarea里的<img>标签转换成对应的emoji，而是直接显示了标签代码。这是因为EmojioneArea默认只识别原生emoji字符或者它的shortcode（比如:smile:），不会自动解析HTML图片标签。下面是具体的解决步骤：

方法一：提前转换img标签为Emoji字符 #

在初始化EmojioneArea之前，先手动处理textarea的内容，把img标签替换成对应的emoji。你可以利用img标签的alt属性（这里已经是emoji字符😃）来做替换：

// 先获取目标textarea元素
const editCommentTextarea = document.querySelector('textarea.edit-comment');

// 正则替换所有符合格式的img标签为alt属性里的emoji
const processedContent = editCommentTextarea.value.replace(
  /<img[^>]+alt="([^"]+)"[^>]*>/g,
  (match, emojiAlt) => emojiAlt
);

// 将处理后的内容放回textarea
editCommentTextarea.value = processedContent;

// 再初始化EmojioneArea
new EmojioneArea({
  selector: '.edit-comment',
  // 这里可以添加你的其他配置项，比如占位符、主题等
});

如果你的img标签的alt不是直接的emoji字符，而是通过src里的十六进制编码（比如1f603）来对应emoji，也可以通过编码转换：

const processedContent = editCommentTextarea.value.replace(
  /<img[^>]+src="[^\/]+\/([0-9a-f]+)\.png"[^>]*>/g,
  (match, hexCode) => String.fromCodePoint(parseInt(hexCode, 16))
);

方法二：优化存储方式（推荐） #

从根源上解决问题的话，建议你在数据库中存储原生emoji字符或者Emojione的shortcode（比如:smile:），而不是存储HTML img标签。这样后续编辑时，EmojioneArea可以直接识别并渲染成emoji，不需要额外的转换步骤。

比如存储内容为：Hello John 😃 或者 Hello John :smile:，初始化EmojioneArea后就能直接显示正常的emoji了。

内容的提问来源于stack exchange，提问作者John