如何浏览 DOM 中所有突出显示的文本

问：

我有一个管道可以突出显示通过输入字段传递的文本，它工作正常。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlighter',
})
export class HighlighterPipe implements PipeTransform {
  transform(value: string, args: string): unknown {
    if (!args) {
      return value;
    }

    const re = new RegExp(args, 'ig');
    value = value.replace(re, '<span class="highlighted-text">$&</span>');
    
    return value;
}

现在，下一步基本上是使用下一个和上一个按钮浏览所有这些按钮，就像这样：

所以，每当用户点击下一个或上一个按钮时，都会引起对突出显示的文本的滚动行为，它不一定是平滑滚动，它暂时无关紧要，而只是进入目标。

我对如何通过将 ID 添加到突出显示的文本列表并以某种方式匹配它们来实现它有一个基本的想法。但是，问题是我在此输入搜索中遇到了更改事件，因此我认为如果我在用户写下内容时一遍又一遍地添加和删除 ID 属性可能会更加困难，更不用说性能本身了。

任何想法将不胜感激！ 谢谢！