前言

最近在做一个日志管理的功能，其中有一个功能是这样的，在一个页面上会显示千上万条日志，
需要做一个搜索的功能，并能将搜索结果一一显示在视口中，通过控制滚动条。
这里使用html+原生js实现了一个简单的demo，核心步骤都是已实现。这里稍作一下记录。

技术实现

主要技术点是，获取装载所有日志的容器的innerHTML，然后使用js的replace搭配正则表达式，对内容进行搜索替换。
搜索替换的核心代码

const newHtml = logHtml.replace(reg, res => {searchNum++return `${res}`
})

logHtml变量 日志容器的innerHTML
reg变量 要搜索的关键词正则表达式
searchNum变量 用来存放搜索结果的个数
css类search-res 用于高亮搜索结果和查询搜索结果

滚动到第num个搜索结果的核心代码
通过css类search-res来获取所有的搜索结果，并使用num来获取具体要显示的搜索结果。
要显示第num个搜索结果，需要将日志容器的滚动条scrollTop（元素到父元素顶部的高度），设置为搜索结果元素的offsetTop减去日志容器视口高度的一半。

const currentEl = document.querySelectorAll(".search-res")[num - 1]
document.querySelector("#log-container").scrollTop = currentEl.offsetTop - document.querySelector("#log-container").offsetHeight / 2
document.querySelector("#current-num").innerText = currentNum

注意：每次在innerHTML中搜索，都是日志容器的原始innerHTML。即在没有搜索前保存的innerHTML，日志数据不会，它就不会改变。
如果每次搜索前，取当前的日期容器innerHTML，那么就会保留上一次搜索的结果。

显示效果

点击enter键，跳到下一个搜索结果。

显示效果如上图，

完整代码

日志搜索定位
0/0

总结

如果读者有更好的方案，欢迎在评论区留言。这是一次比较简单的尝试。
除此之外你还可以使用monaco编辑器来显示日志，搜索，以及着色。
对于使用虚拟滚动来实现日志展示的，不置与否。
只有最合适的技术，没有最优秀的技术。