时间戳

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

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

问题描述

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

我的主要想法是我将拥有一个包含所有自定义表情的 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 作为背景图像。我很好奇这是否是一个好方法？坦率地说，我不太确定我现在将如何迭代消息并将它们分割，但我会弄清楚的。

我在正确的轨道上吗？

标签： javascript

解决方案

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

在 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标签包围。只有表情被替换。

推荐阅读