如何使用ng-select正确高亮格式化后的IBAN字符串？

核心问题 #

格式化后的IBAN包含空格，导致默认的ngOptionHighlight无法跨空格匹配连续的搜索内容，要么高亮中断，要么出现错误的分散高亮。

解决方案：自定义高亮逻辑 #

放弃默认的ngOptionHighlight指令，自己实现忽略空格的高亮匹配，步骤如下：

1. 在组件中添加高亮处理方法
   编写一个方法，将搜索词和格式化后的IBAN处理后，生成带高亮标签的HTML内容：

   highlightIban(formattedIban: string, searchTerm: string): string {
     if (!searchTerm) return formattedIban;
     
     // 清除搜索词中的所有空格
     const cleanedSearch = searchTerm.replace(/\s/g, '');
     if (!cleanedSearch) return formattedIban;
     
     // 构建正则：允许匹配字符之间存在任意空格
     const matchPattern = cleanedSearch.split('').join('\\s*');
     const regex = new RegExp(matchPattern, 'gi');
     
     // 将匹配到的内容用<strong>标签包裹
     return formattedIban.replace(regex, match => `<strong>${match}</strong>`);
   }
   

2. 修改模板渲染逻辑
   使用[innerHTML]渲染处理后的高亮内容，替换原来的ngOptionHighlight指令：

   <ng-select [items]="accounts" 
              bindLabel="name" 
              bindValue="id" 
              [(ngModel)]="selectedAccount">
   
       <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
           <span [innerHTML]="highlightIban(item.iban | iban, search)"></span>
       </ng-template>
   </ng-select>
   

效果说明 #

• 当输入123455时，会匹配格式化IBAN中的1234 55部分，渲染为<strong>1234 55</strong>66 4555 0550，符合预期。
• 输入空格时，会被自动清除，不影响正常高亮匹配。

为什么之前的方法无效 #

• 用nospace管道处理搜索词：处理后的搜索词是无空格的，无法匹配带空格的格式化IBAN，只能匹配到连续无空格的片段。
• 用iban管道处理搜索词：格式化后的搜索词会被分割成带空格的片段，会在IBAN的多个位置匹配到分散的片段，导致高亮混乱。

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