我正在创建一个聊天应用程序并尝试实现类似于 twitch 表情的自定义表情。我走在正确的道路上吗？

Question

目前我有一个运行良好的实时聊天应用程序，它运行得很好，但我正在尝试让它眼花缭乱，并认为自定义表情会是一个很好的补充。

我的主要想法是，我将有一个JSON文件，其中将包含所有自定义表情。例如：

[
{
keyword: "LOL",
url: "imageUrl1"
},
{
keyworld: "HAHA",
url: "imageUrl2"
}
]

因此，每当收到消息时，我都必须将消息拆分为<span></span>元素，并将表情的关键字替换为包含图标图像的跨度。例如：

That was so funny LOL. Do it again!

将分为3个跨度

<span>That was so funny <span>
<span class='LOL'></span>
<span>.Do it again!</span>

并且具有类LOL的span元素将具有表情URL作为背景图像。我很好奇这是不是一个好方法？坦率地说，我不太确定我现在该如何迭代这些消息并将其分割，但我会弄清楚的。

我走对了吗？

Answer 1

我认为你走在了正确的轨道上。你的应用程序可以扫描每条消息，并在显示之前对其进行修改。你不确定的部分实际上是棘手的部分。做到这一点的方法在很大程度上取决于知道你所有的有效字符是什么，以及哪些字符将用于识别表情符号。从你提供的例子来看，这似乎很简单。看起来你有一些独特的"单词"，你想在邮件中找到并替换。

在Javascript中，您可以执行以下操作：

let message = 'That was so funny LOL. Do it again!'
const emotes = [
{
keyword: "LOL",
url: "imageUrl1"
},
{
keyworld: "HAHA",
url: "imageUrl2"
}
]
emotes.forEach(emote => {
message = message.replace(emote.keyword, `<span class="${emote.keyword}"></span>`)
})
console.log(message) // That was so funny <span class="LOL"></span>. Do it again!

请注意，在这种方法中，并不是所有内容都被span标签包围。只有表情符号会被替换。