怎么实现对比2文本后，把相同的文本高亮？

问题相关代码，请勿粘贴截图

<div class="com-mark-p-reference" data-type="html" data-id="1" id="com_mark_reference_1">
<div class="com-mark-pr-content com-mark-pr-html">
<b>检索词query</b>：<span style="color:#ff0000;">档案业务指导书</span><br>
<b>标题</b>：<span style="color:#ff0000;">生产技术部电网建设项目档案业务指导书.doc</span></div>
    </div>

我想要达到的结果

对比检索词和标题，把所有相同的字高亮起来，对比文本单个字，单独也需要高亮起来

首先点击检索或者检索栏失焦的时候调用js方法，js判断检索词是否在标题中出现过用indexOf，一旦出现过，把标题拆成三部分，头部：生产技术部电网建设项目，关键部位：档案业务指导书,尾部： .doc，var str = 头部+关键部位+尾部，替换原来标题展示的内容

最好能发下脚本代码，就是类似猴子的插件使用