Angular中通过TS为data指定位置文本添加颜色的技术求助

步骤1：提取高亮关键词并定义颜色映射 #

在组件TS文件中，先从info中提取需要高亮的目标关键词，同时定义每个关键词对应的颜色：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  data: string = "My **name** is Sam. My <strong>country</strong> is Greece.";
  // 根据你的实际info结构调整路径
  info = {
    "key1": {
      "key2": ["name"]
    },
    "key3": {
      "key4": ["country"]
    }
  };

  // 提取需要高亮的关键词
  private highlightKeywords: string[] = [
    this.info["key1"]["key2"][0],
    this.info["key3"]["key4"][0]
  ];

  // 关键词对应颜色映射
  private keywordColors: {[key: string]: string} = {
    "name": "#e74c3c",
    "country": "#2ecc71"
  };

  constructor(private sanitizer: DomSanitizer) {}
}

步骤2：编写字符串处理函数 #

在TS文件中添加处理函数，完成两个核心操作：

1. 将Markdown格式的**文本**转换为HTML的<strong>标签
2. 匹配目标关键词，替换为带颜色样式的<span>标签，最后通过DomSanitizer确保HTML安全

processDataForHighlight(): SafeHtml {
  let processedData = this.data;

  // 处理Markdown粗体为HTML粗体
  processedData = processedData.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');

  // 遍历关键词，替换为带颜色的span（用单词边界避免部分匹配）
  this.highlightKeywords.forEach(keyword => {
    if (keyword && this.keywordColors[keyword]) {
      const regex = new RegExp(`\\b${keyword}\\b`, 'g');
      processedData = processedData.replace(
        regex, 
        `<span style="color: ${this.keywordColors[keyword]}; font-weight: inherit;">$&</span>`
      );
    }
  });

  // 安全化HTML，避免Angular阻止渲染
  return this.sanitizer.bypassSecurityTrustHtml(processedData);
}

步骤3：修改模板渲染方式 #

将原来的插值表达式{{data}}替换为[innerHTML]绑定，渲染处理后的安全HTML：

<mat-panel-title>
  <span [innerHTML]="processDataForHighlight()"></span>
</mat-panel-title>

说明 #

• 正则中的\b是单词边界，确保只匹配独立的关键词（比如不会把names中的name误高亮）
• 如果不需要保留粗体样式，可以去掉Markdown转HTML的步骤
• 颜色映射可以根据需求动态调整，比如从后端接口获取样式配置

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