如何用twemoji替换html中的表情符号

Question

在用户生成的帖子中，我有很多原始的表情符号，例如

   <p>I ❤ your post!</p> 

我想知道用彩色表情符号替换这些表情符号的最佳方法是什么，例如：

 <p>I <i class="twa twa-heart">❤️</i> your post!</p>

我想用 twemoji 库来设置表情符号的样式。

您可能会问，为什么不让用户在选择表情符号时首先插入样式的表情符号？答案是界面的文本编辑器不是所见即所得的，用户帖子被严重剥离。因此，排除了此类选项，我正在寻找在渲染时进行此转换的解决方案。

Answer 1

查看 twemoji 的文档....https://github.com/twitter/twemoji#api

应用程序接口

以下是 twemoji 命名空间中公开的所有方法。

twemoji.parse( ... (V1

版

这是主要的解析实用程序，每种解析类型有 3 个重载。

解析

主要有两种：字符串解析和 DOM 解析。

您可以解析字符串(解析其输入(。

我相信你正在寻找这样的烟雾：

但是，对于已经清理的字符串，此方法可以认为足够安全。请参阅 DOM 解析 如果安全性是您的主要关注点之一。

twemoji.parse('I u2764uFE0F emoji!');
// will produce
/*
I <img
  class="emoji"
  draggable="false"
  alt="❤️"
  src="https://twemoji.maxcdn.com/36x36/2764.png"/> emoji!
*/

Answer 2

使用一个对象，其中键是剥离的表情符号，值是完整的 HTML 内容。遍历字符串中的每个字符，并检查它是否是剥离的表情符号。如果是这样，请更换它。最后，将它们全部连接在一起并写入页面。

const raw = "<p>I ❤ your post!</p>";
const emojis = {
  "❤": `<i class="twa twa-heart">❤️</i>`
};
const res = [...raw].map(e => emojis[e] || e).join("");
document.write(res);