最近我遇到了个难题，打算标注在线文本中的关键词，虽然说出来简单，但是实际操作起来真让人心烦脑乱。那么今天，我就来和大家聊聊这个麻烦事儿，顺带教大家如何解决这个难题。希望对像我一样心塞的朋友们有所启发！当然，如果你急性子，急着找答案的话，直接跳到文章末尾看结果~
给关键词打上小标签，然后调整下格式就搞定了，挺容易的。但是记住，别用innerText和outText，要用innerHTML或者outerHTML替代它们~
const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,""+keyword+"")
element.classList.add("highlight")
这样做其实有些小风险哎。比方说，如果这个关键词的爸爸是用class给它设了个背景色，那么可能就在原有的DOM上弄乱了些东西，等想要找其他地方可能就会很费劲。说实话，咱们还是希望能尽量少地去动原代码呗。
() divtest
还得说有的优化问题真是让人闹心。比如，咱们就想把标签这部分搞定，这样大部分难题都能迎刃而解了。可还是遇到麻烦，比如说，要是标签属性里出现像”[1]”这种东西的话，可得留点儿神儿！
咱使劲尝试过几次用正则匹配，但还是没法完全解决问题。于是我们决定换一种方式，不再费劲地调整字符串，而是直接动手搞定节点。
var formatKeyword = text.replace(/[-/\^$*+?.()|[]{}]/g, '\$&') // 转义处理keyword包含的特殊字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于标签内的文本，避免误操作 class、id 等
element.innerHTML = element.innerHTML.replace(finder,function(matched){
return matched.replace(text,"
"+text+)
})// 对提取的标签内文本进行关键字替换
咱们就把老爹元素中的娃娃们都找出来，一个个解决它们。碰到文字宝贝（文子节点）的话，就给它来个换词手术，改掉关键词得到理想效果。若是遇上别的类型，比如链接或者图画啥的，那就得接着往娃（子节点）肚子里去挖，直到问题解决为止。
d">替换
哎唷，这事儿得在意！文本节点更改的只是文字内容而已，HTML和控制样式可是不能添加上去的。反之也是一样的道理，就算你强行把它变成普通节点，也还是空欢喜一场，真是让人头疼！
keyword=》将闭合标签用变量替换 [replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处理 =》 [replaced1]keyword[replaced2] =》将暂存变量 replaced 替换为原先标签keyword
不容易，不过最后我们还是找到了解决方法！只需将文本节点拆分后挪动位置，就能轻松实现高亮显示效果。在本文中有更具体的代码示例以及高亮恢复步骤。
今天我来教大家如何在HTML中上色关键词不懂得地方尽管问，我会很快解答哒。再次感谢大家对我们网站的关注和支持喔。记得留言，点个赞，转发给你的小伙伴们看看哟~
keyword 1 keyword 2
评论0