寻求Angular中HTML/富文本场景下ngb-highlight的替代方案

针对你迁移到HTML/富文本后无法复用ngb-highlight高亮逻辑的问题，这里提供几个可行的实现思路：

方案一：自定义高亮管道（推荐快速落地） #

创建一个Angular管道，专门处理富文本内容的关键词高亮，同时保留原有HTML结构：

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

@Pipe({ name: 'htmlHighlight' })
export class HtmlHighlightPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(htmlContent: string, term: string): SafeHtml {
    if (!term || !htmlContent) return this.sanitizer.bypassSecurityTrustHtml(htmlContent);

    // 转义正则特殊字符，避免匹配出错
    const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // 构建大小写不敏感的匹配正则
    const regex = new RegExp(`(${escapedTerm})`, 'gi');
    
    // 替换匹配内容为高亮标签，同时保留原有HTML结构
    const processedHtml = htmlContent.replace(regex, '<mark>$1</mark>');
    return this.sanitizer.bypassSecurityTrustHtml(processedHtml);
  }
}

使用时直接绑定到innerHTML：

<div [innerHTML]="richTextContent | htmlHighlight: searchTerm"></div>

方案二：扩展ngb-highlight适配HTML内容 #

如果想完全复用ngb-highlight的交互逻辑，可基于其源码改造，核心是调整文本节点的处理逻辑，改为遍历DOM中的文本节点实现高亮：

import { Component, Input, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-html-highlight',
  template: '<div [innerHTML]="content"></div>'
})
export class HtmlHighlightComponent implements OnInit {
  @Input() content: string = '';
  @Input() term: string = '';

  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    this.applyHighlight();
  }

  ngOnChanges() {
    this.applyHighlight();
  }

  private applyHighlight(): void {
    const container = this.elRef.nativeElement.querySelector('div');
    if (!container || !this.term) return;

    // 清除已有高亮
    const existingMarks = container.querySelectorAll('mark');
    existingMarks.forEach(mark => {
      const parent = mark.parentNode;
      parent?.replaceChild(document.createTextNode(mark.textContent || ''), mark);
      parent?.normalize();
    });

    // 遍历文本节点执行高亮
    this.highlightTextNodes(container, this.term);
  }

  private highlightTextNodes(element: HTMLElement, term: string): void {
    const regex = new RegExp(term, 'gi');
    const childNodes = Array.from(element.childNodes);

    childNodes.forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        const text = node.textContent || '';
        if (regex.test(text)) {
          const fragment = document.createDocumentFragment();
          let lastIndex = 0;

          text.replace(regex, (match, index) => {
            fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)));
            const mark = document.createElement('mark');
            mark.textContent = match;
            fragment.appendChild(mark);
            lastIndex = index + match.length;
            return match;
          });

          fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
          node.parentNode?.replaceChild(fragment, node);
        }
      } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName.toLowerCase() !== 'mark') {
        this.highlightTextNodes(node as HTMLElement, term);
      }
    });
  }
}

使用时直接传入富文本内容和搜索关键词：

<app-html-highlight [content]="richTextContent" [term]="searchTerm"></app-html-highlight>

方案三：结合表单监听实现联想高亮 #

如果需要保留输入联想的实时交互，可监听搜索框输入变化，手动触发DOM高亮逻辑：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  template: `
    <input [formControl]="searchTerm" placeholder="搜索关键词">
    <div id="rich-text-container" [innerHTML]="richTextContent"></div>
  `
})
export class RichTextSearchComponent {
  searchTerm = new FormControl('');
  richTextContent = '<p>这是包含<b>HTML标签</b>的富文本内容，需要高亮匹配关键词</p>';

  ngOnInit() {
    this.searchTerm.valueChanges.pipe(
      debounceTime(150) // 防抖避免频繁DOM操作
    ).subscribe(term => {
      this.updateHighlight(term);
    });
  }

  private updateHighlight(term: string): void {
    const container = document.getElementById('rich-text-container');
    if (!container) return;

    // 清除旧高亮
    const marks = container.querySelectorAll('mark');
    marks.forEach(mark => {
      const parent = mark.parentNode;
      parent?.replaceChild(document.createTextNode(mark.textContent || ''), mark);
      parent?.normalize();
    });

    if (!term) return;

    // 执行新高亮
    const regex = new RegExp(term, 'gi');
    const highlightTextNodes = (el: HTMLElement) => {
      Array.from(el.childNodes).forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
          const text = node.textContent || '';
          if (regex.test(text)) {
            const fragment = document.createDocumentFragment();
            let lastIndex = 0;
            text.replace(regex, (match, index) => {
              fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)));
              const mark = document.createElement('mark');
              mark.textContent = match;
              fragment.appendChild(mark);
              lastIndex = index + match.length;
              return match;
            });
            fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
            node.parentNode?.replaceChild(fragment, node);
          }
        } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName.toLowerCase() !== 'mark') {
          highlightTextNodes(node as HTMLElement);
        }
      });
    };

    highlightTextNodes(container);
  }
}

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