实现文本搜索的最佳方式

Question

想象一下，我们有下一个元素：

<input type="text" data-search />
<div data-container>
  <div>text 1</div>
  <div>text 2 <span>some other</span> <strong>text</strong></div>
</div>

在输入[data-search]输入后，应在容器[data-container]中突出显示输入的短语（如果已找到短语）。

此搜索应为“实时”。可以跳过搜索元素（some other text不会给出任何结果），但如果您知道如何实现此功能，那就太棒了。

因此，简单的RegExp和替换所有内容的操作非常繁重，因为[data-container]内容可能很大。

其他方式是在找到的文本下绘制rects。但同样，如何在不更新容器的情况下检测文本位置（我们可以在文本中添加一些包装并计算其坐标然后将其删除）？

或许你可以给我一个平稳的建议，我应该朝哪个方向移动。

感谢。