如何在Ion-Card中基于正则动态为文本添加彩色Span标签

方法1：使用[innerHTML]绑定（最简方案） #

Angular的双大括号{{}}插值会自动转义HTML内容，要让标签生效，需改用[innerHTML]属性绑定：

1. 修改TS的替换逻辑：去掉转义字符，直接生成原生HTML标签

replaceIt = (str: string) => {
  const regex = /\B([\#\@][a-zA-Z]+\b)(?!;)/g;
  // 直接输出原生HTML，无需转义
  const subst = `<span style="color:blue">$1</span>`;
  const result = str.replace(regex, subst);
  return result;
}

2. 修改HTML的内容渲染：把{{item.glyph_content}}换成[innerHTML]绑定

<ion-card-content [innerHTML]="item.glyph_content">
</ion-card-content>

这样就能直接渲染出带有蓝色样式的span标签了。

方法2：拆分文本节点，用*ngFor+*ngIf渲染（无HTML绑定，更安全） #

如果内容来自用户输入，使用innerHTML存在XSS风险，可将文本拆分为普通文本和高亮片段的数组，通过模板语法渲染：

1. 修改TS逻辑，拆分文本为片段数组

// 重写replaceIt，返回拆分后的片段数组
replaceIt = (str: string) => {
  const regex = /\B([\#\@][a-zA-Z]+\b)(?!;)/g;
  const parts: { type: 'text' | 'highlight', content: string }[] = [];
  let lastIndex = 0;
  let match;

  // 循环匹配所有@/#开头的内容，拆分文本
  while ((match = regex.exec(str)) !== null) {
    // 添加匹配前的普通文本
    if (match.index > lastIndex) {
      parts.push({ type: 'text', content: str.slice(lastIndex, match.index) });
    }
    // 添加需要高亮的内容
    parts.push({ type: 'highlight', content: match[0] });
    lastIndex = regex.lastIndex;
  }

  // 添加最后一段未匹配的普通文本
  if (lastIndex < str.length) {
    parts.push({ type: 'text', content: str.slice(lastIndex) });
  }

  return parts;
}

// 在ngOnInit中保存拆分后的片段数组
ngOnInit(): void {
    this.glyphService.getAllGlyphs().subscribe(
      result => {
        this.items = result;
        this.items.sort((a, b) => Number(b.rune) - Number(a.rune));
        for (let i = 0; i < this.items.length; i++) {
          // 新增字段存储拆分后的片段
          this.items[i].glyph_content_parts = this.replaceIt(this.items[i].glyph_content);
        }
      }
    );
  }

2. HTML中用模板语法渲染片段

<ion-card-content>
  <ng-container *ngFor="let part of item.glyph_content_parts">
    <!-- 高亮内容用span包裹并设置颜色 -->
    <span *ngIf="part.type === 'highlight'" style="color:blue">{{part.content}}</span>
    <!-- 普通文本直接输出 -->
    <span *ngIf="part.type === 'text'">{{part.content}}</span>
  </ng-container>
</ion-card-content>

这种方式完全通过Angular模板控制渲染，避免了HTML注入风险，同时实现了预期的高亮效果。

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