如何根据输入文本插入HTML对象？实现Discord式图文插入

你提到的replace()方法完全可行，但单个固定字符串的replace只能替换一次特定标签，要实现像Discord那样批量处理任意:xxx:指令的效果，得结合正则全局匹配和图片映射表来做，具体步骤如下：

1. 准备图片映射表 #

先把所有支持的:标签名:和对应的图片路径存成一个对象，方便快速查找：

// 示例：键是标签名（不带前后冒号），值是图片URL/路径
const gifMap = {
  "example": "imagepath.png",
  "laugh": "/assets/gifs/laugh.gif",
  "sad": "/assets/images/sad.png",
  "clap": "https://example.com/clap.gif"
};

2. 编写全局替换函数 #

用正则表达式匹配所有:xxx:格式的内容，然后通过映射表替换成对应的<img>标签：

function convertGifTags(inputText) {
  // 正则匹配：冒号包裹的字母/数字/下划线，g表示全局匹配
  return inputText.replace(/:(\w+):/g, (match, tagName) => {
    // 检查映射表中是否存在该标签
    if (gifMap[tagName]) {
      return `<img src="${gifMap[tagName]}" alt="${tagName}" class="emoji-gif">`;
    }
    // 如果标签不存在，返回原内容不替换
    return match;
  });
}

3. 结合textarea使用 #

可以在提交时处理内容，或者做实时预览：

提交时处理 #

const textarea = document.querySelector('#message-input');
const sendBtn = document.querySelector('#send-btn');
const messageContainer = document.querySelector('#message-list');

sendBtn.addEventListener('click', () => {
  const rawText = textarea.value.trim();
  if (!rawText) return;

  // 转换标签为图片
  const renderedContent = convertGifTags(rawText);
  // 插入到消息列表
  const messageElement = document.createElement('div');
  messageElement.className = 'message';
  messageElement.innerHTML = renderedContent;
  messageContainer.appendChild(messageElement);

  // 清空输入框
  textarea.value = '';
});

实时预览（可选） #

监听输入框的input事件，实时显示转换后的效果：

const previewArea = document.querySelector('#preview');

textarea.addEventListener('input', () => {
  previewArea.innerHTML = convertGifTags(textarea.value);
});

优化细节 #

• 支持特殊标签名：如果需要标签名包含空格、连字符，把正则改成/:([\w\s-]+):/g，同时映射表的键也要对应调整
• 样式控制：给插入的图片加CSS类，设置合适的尺寸和对齐方式：

.emoji-gif {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin: 0 2px;
}

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