如何基于正则匹配将含Discord表情的字符串解析为HTML元素

核心思路是先把原始字符串拆成普通文本片段和表情匹配片段，再逐个片段生成对应的HTML标签，最后确保这些标签能被正确渲染而非当成纯文本展示。

步骤1：分割字符串为混合片段 #

用正则把原始字符串拆分成包含文本和表情的数组，同时保留表情匹配项（关键是利用正则的捕获组或matchAll来保留所有片段的顺序）。

示例正则（匹配Discord表情格式）：/<:[^:]+:(\d+)>/g

原生JS代码示例：

const message = "This is a string with some emojis <:PepeHey:584511188944027705> and heres a second emoji <:PepeHey:584511188944027705>";
const emojiRegex = /(<:[^:]+:(\d+)>)/g;

// 分割成文本+表情的混合数组
const parts = message.split(emojiRegex);
// 过滤空字符串，避免生成无效标签
const filteredParts = parts.filter(part => part.trim() !== '');

步骤2：生成对应HTML元素 #

遍历分割后的片段，判断类型后分别生成<p>或<img>标签：

const htmlElements = filteredParts.map(part => {
  // 判断当前片段是否是表情
  const isEmoji = emojiRegex.test(part);
  if (isEmoji) {
    // 提取表情ID
    const emojiId = part.match(/:(\d+)>/)[1];
    return `<img src="https://cdn.discordapp.com/emojis/${emojiId}.png" alt="emoji" />`;
  } else {
    return `<p>${part}</p>`;
  }
});

// 拼接成完整的HTML字符串
const finalHtml = htmlElements.join(' ');

步骤3：确保HTML被正确渲染 #

直接输出finalHtml会被当成纯文本，必须用支持HTML解析的方式插入页面：

• 原生JS场景：使用元素的innerHTML属性

document.getElementById('message-container').innerHTML = finalHtml;

• React框架场景：使用dangerouslySetInnerHTML（注意XSS风险，若消息来自不可信源需额外过滤）

<div dangerouslySetInnerHTML={{ __html: finalHtml }} />

额外优化点 #

• 可以合并连续的文本片段，避免生成过多细碎的<p>标签
• 对表情添加样式（比如设置宽高），让展示更贴合Discord原生效果

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