Javascript Vuejs：如何使用prev/next循环浏览突出显示的搜索词

我想让用户使用“下一个/上一个”箭头循环搜索已找到的搜索字符串的突出显示，类似于Google Docs中的显示：

我知道如何使用过滤器和regexp突出显示所有引用：

以及：

过滤器：{
highlightSearchResults（文本、搜索术语）{
const re=new RegExp（searchTerms，“gi”）
返回text.replace（re，（match）=>`${match}`
}

---

但是我正在琢磨如何在找到的实例中循环。有人能给我指出正确的方向吗？

您可以创建一个

currentIndex

，它引用当前突出显示的事件的索引（并由Next/Prev按钮更新）

导出默认值{
数据（）{
当前索引：0，
}
}

另外，在字符串替换程序中保留一个迭代器索引，如果该索引与当前索引匹配，则只返回高亮显示的

：

导出默认值{
方法：{
highlightSearchResults（文本、搜索术语）{
const re=new RegExp（searchTerms，'gi'）
设i=0
返回文本。替换（重新，（匹配）=>
（i++==此.currentIndex）
？`${match}`
：匹配
)
},
}
}

还考虑从模板中替换<代码>高亮搜索结果< /代码>，并使用计算的PROP来改进渲染性能，因为值将在下一个渲染中使用：

导出默认值{
计算：{
highlightedText（）{
返回此.highlightSearchResults（this.theText，this.searchTerms）
}
}
}