Angular/JS中花括号占位符精确匹配替换为SVG图标实现方案

你当前的匹配错误本质是正则语法特性导致的：{}是正则中的量词元字符，直接将{0}这类字符串传入RegExp构造函数时，引擎会将其识别为重复次数规则，而非字面量的花括号包裹文本，自然无法精准匹配目标占位符。同时逐符号创建正则全局替换的方案性能差，还容易出现替换顺序导致的内容覆盖问题。

不要为每个符号单独构造正则，采用「预建映射表+单次全局扫描匹配」的方案实现，适配所有万智牌符号场景，同时符合Angular的DOM安全规则：

• 初始化阶段预处理符号数据，建立占位符字符串 -> SVG资源地址的映射表，避免替换时重复遍历符号列表
• 用固定正则匹配文本中所有完整的花括号包裹片段，规则为匹配从{开始、中间无嵌套花括号、到}结束的完整字符串，覆盖所有官方符号格式（包括数字符号、单色/混色符号、横置/重置符号、特殊功能符号等上百种类型）
• 匹配到片段后先校验是否存在于合法符号映射表中，命中则替换为img标签，未命中则保留原文本，避免误替换普通文本中的花括号内容
• 替换完成的HTML交给Angular的DomSanitizer做安全处理后再插入DOM，规避XSS风险和标签转义问题

实现代码 #

TS 逻辑部分 #

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { CardSymbol } from './your-card-model.interface';

export class CardTextRenderer {
  // 符号映射表，初始化时一次性填充
  private readonly symbolMap = new Map<string, string>();

  constructor(
    private _symbolService: YourSymbolService,
    private sanitizer: DomSanitizer
  ) {
    // 服务拿到符号数据后初始化映射表
    this._symbolService.symbology.data.forEach((item: CardSymbol) => {
      this.symbolMap.set(item.symbol, item.svg_uri);
    });
  }

  /**
   * 解析卡牌神谕文本为可渲染的安全HTML
   * @param rawText 原始卡牌文本
   */
  parseOracleText(rawText: string): SafeHtml {
    if (!rawText?.trim()) return '';

    const parsedContent = rawText.replace(/\{[^{}]+\}/gm, (matchedStr) => {
      // 仅替换合法的万智牌符号
      if (this.symbolMap.has(matchedStr)) {
        const svgUrl = this.symbolMap.get(matchedStr);
        return `<img 
          src="${svgUrl}" 
          class="card-symbol-image" 
          alt="${matchedStr}"
          loading="lazy"
        />`;
      }
      // 非符号的花括号内容原样保留
      return matchedStr;
    });

    // 经Angular安全处理后返回，可直接绑定到innerHTML
    return this.sanitizer.bypassSecurityTrustHtml(parsedContent);
  }
}

模板使用部分 #

<!-- 直接绑定解析后的安全HTML即可 -->
<div class="card-oracle-text" [innerHTML]="parseOracleText(card.oracle_text)"></div>

方案优势 #

• 匹配精度100%：不需要对动态符号做额外正则转义，不管占位符内含数字、斜杠（混色符号如{W/U}、{2/R}）、特殊字符（如{T}、{½}、{∞}）都能精准匹配完整占位符，不会出现截断、误匹配问题
• 性能更优：仅需一次全文本正则扫描，不需要对上百个符号逐次执行全局替换，大段卡牌文本解析速度提升明显
• 容错性强：非官方符号列表内的花括号文本不会被误替换，兼容卡牌文本里的备注、特殊格式内容
• 符合框架规范：经过DomSanitizer处理的HTML不会触发Angular的安全拦截，也不会出现标签被转义成纯文本的问题

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