如何编写通用函数实现自定义标签的自动替换？

需求概述 #

需要实现三类自定义标签的自动替换：

• <day> 替换为当前日期的日份（示例：14）
• <red>...</red> 替换为 <span style="color: red">...</span>
• <a ###链接>文本</> 替换为 <a href="链接">文本</a>

现有一个仅处理<red>标签的JavaScript函数，需改造为能处理所有三类标签的通用函数，同时结合Vue模板渲染内容。

现有代码 #

JavaScript处理函数 #

export const formatTags = (content) => {
  const firstTag = "<red>";
  const secondTag = "</red>";

  const tagsIndex = [...content.matchAll(new RegExp(firstTag, "gi"))].map(
    (a) => a.index
  );

  const initialContent = content;

  tagsIndex.forEach((index) => {
    const tagContent = initialContent.substring(
      index + firstTag.length,
      initialContent.indexOf(secondTag, index)
    );

    if (firstTag === "<red>") {
      content = content.replaceAll(
        `${firstTag}${tagContent}${secondTag}`,
        `<span style="color: red">${tagContent || "わからない"}</span>`
      );
    }
  });

  return content;
};

Vue模板 #

<span
   :class="(msg.image || msg.file) && msg.text ? 'mt-2' : ''"
   v-html="msg.text"
   v-linkified:options="{
    className: currentUserId === msg.senderId
     ? 'message-external-link'
     : '',
   }"
/>

改进后的通用替换函数 #

通过正则表达式批量替换可以实现更简洁高效的通用处理，避免手动遍历索引的复杂逻辑：

export const formatTags = (content) => {
  if (!content) return content;

  // 1. 替换<day>为当前日期的日份（补0处理，确保两位数格式，如5号显示为05）
  const currentDay = new Date().getDate().toString().padStart(2, '0');
  content = content.replace(/<day>/g, currentDay);

  // 2. 替换<red>...</red>为红色span，支持大小写不敏感的标签（如<RED>）
  content = content.replace(/<red>([\s\S]*?)<\/red>/gi, (match, text) => {
    return `<span style="color: red">${text || "わからない"}</span>`;
  });

  // 3. 替换<a ###链接>文本</>为标准a标签
  content = content.replace(/<a ###([^>]+)>([\s\S]*?)<\/>/g, (match, href, text) => {
    return `<a href="${href.trim()}">${text || ''}</a>`;
  });

  return content;
};

Vue模板使用调整 #

在Vue模板中，需要将msg.text通过formatTags处理后再传入v-html：

<span
   :class="(msg.image || msg.file) && msg.text ? 'mt-2' : ''"
   v-html="formatTags(msg.text)"
   v-linkified:options="{
    className: currentUserId === msg.senderId
     ? 'message-external-link'
     : '',
   }"
/>

代码说明 #

• 使用[\s\S]*?匹配标签内任意内容（包括换行），非贪婪模式避免匹配跨标签的内容
• <day>的补0处理为可选逻辑，若不需要两位数格式可移除padStart(2, '0')
• 每个替换逻辑独立，后续新增标签只需添加对应正则替换规则即可

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