如何将短代码格式的表情符号替换为HTML图片元素？

我需要解析字符串，找出:thing:格式的表情短代码，把它们替换成<img src="thing.png" />形式的HTML图片元素。尝试用String.replace的函数替换方法时，只能返回字符串而不是HTML元素；用createElement创建图片时，得到的结果却是[object Object]。

原代码示例 #

JavaScript代码

const container = document.getElementById('result');

const testArray = [
    ':cat: fixed something',
    ':godmode: cool new feature',
    ':feelsgood: :godmode: Much emoji',
  ];
  
  const imgObj = {
    "cat": "https://github.githubassets.com/images/icons/emoji/unicode/1f431.png?v8",
      "godmode": "https://github.githubassets.com/images/icons/emoji/godmode.png?v8",
      "feelsgood" :  "https://github.githubassets.com/images/icons/emoji/feelsgood.png?v8"

}

const reg = /:([a-zA-Z]+):/g;

// 查找:colon:格式的短代码，去掉冒号后作为对象的键
function replacer(match) {
    // 去掉冒号
    let emo = match.split(':').join('');
// 这里有问题——返回的是字符串而非我想要的HTML元素
    let imgSrc = imgObj[emo];
    return '<img src="' + imgSrc + '" /> ';
  }
  
  testArray.forEach((commit) => {
   let formatted =   commit.replace(reg, replacer);
   container.append(formatted);
    container.appendChild(document.createElement('br'));

  });

HTML代码

<div id="result">
</div>

解决方案 #

问题核心在于：String.replace本质是字符串替换，没法直接返回DOM元素；直接append字符串会被当成文本解析，而返回DOM元素给replace的话，会被强制转成[object Object]字符串。

正确做法是把字符串拆分成文本片段和表情DOM元素的组合，再逐个添加到容器里：

修正后的代码

const container = document.getElementById('result');

const testArray = [
    ':cat: fixed something',
    ':godmode: cool new feature',
    ':feelsgood: :godmode: Much emoji',
];
  
const imgObj = {
    "cat": "https://github.githubassets.com/images/icons/emoji/unicode/1f431.png?v8",
    "godmode": "https://github.githubassets.com/images/icons/emoji/godmode.png?v8",
    "feelsgood": "https://github.githubassets.com/images/icons/emoji/feelsgood.png?v8"
};

const reg = /:([a-zA-Z]+):/g;

// 拆分字符串为文本节点和图片元素的数组
function processEmojiString(str) {
    const domFragments = [];
    let lastPos = 0;
    let matchResult;

    // 循环匹配所有表情短代码
    while ((matchResult = reg.exec(str)) !== null) {
        // 添加表情之前的纯文本
        if (matchResult.index > lastPos) {
            domFragments.push(document.createTextNode(str.slice(lastPos, matchResult.index)));
        }

        // 创建对应表情图片
        const emojiKey = matchResult[1];
        const emojiImg = document.createElement('img');
        emojiImg.src = imgObj[emojiKey];
        emojiImg.style.verticalAlign = 'middle'; // 可选：让图片和文本对齐更美观
        domFragments.push(emojiImg);

        lastPos = matchResult.index + matchResult[0].length;
    }

    // 添加最后一段剩余文本
    if (lastPos < str.length) {
        domFragments.push(document.createTextNode(str.slice(lastPos)));
    }

    return domFragments;
}

// 处理每个字符串并添加到容器
testArray.forEach(commit => {
    const elements = processEmojiString(commit);
    elements.forEach(el => container.appendChild(el));
    container.appendChild(document.createElement('br'));
});

<div id="result">
</div>

说明 #

• 用正则exec逐个匹配表情，把原字符串拆分成文本节点和图片元素，确保每个部分都是合法的DOM节点。
• 用createTextNode处理纯文本，避免HTML注入风险（如果原字符串包含<等特殊字符时更安全）。
• 直接操作DOM节点添加到容器，最终得到的是真正的图片元素，而非字符串形式的HTML代码。

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