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

【问题标题】：How to replace emojis in html with twemoji?如何用twemoji替换html中的表情符号？
【发布时间】：2019-05-30 13:53:15
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你只需要使用replace。
@杰克巴什福德。有几十个表情符号需要处理。所以我不确定什么最适合解析和替换整个页面。
他们在 GitHub 的首页上的文档字面上告诉你如何做到这一点：twemoji.parse(document.body);

标签： javascript html emoji twemoji

【解决方案1】：

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

API

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

twemoji.parse( ... ) V1

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

主要有两种解析方式：string parsing和DOM parsing。

您可以解析字符串（解析它们的输入）。

我相信您正在寻找这样的 smoeth：

但是，对于已经清理过的字符串，这种方法可以认为是足够安全的。如果安全性是您最关心的问题之一，请参阅 DOM 解析。

twemoji.parse('I \u2764\uFE0F emoji!');

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

【讨论】：

如何将它应用到整个页面？
我已链接到 API，但这是您的直接链接。 github.com/twitter/twemoji#dom-parsing。只需输入存储他们帖子的 HTML5 标记即可。
这就像一个魅力：$(document).ready(function () { document.body = twemoji.parse(document.body); }); 谢谢！
没问题，乐于助人！

【解决方案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);

【讨论】：