const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
if (node.nodeType == 3) { //只处理文本节点
const match = node.data.match(new RegExp(reg));
if (match) {
const highlightEl = document.createElement("b");
highlightEl.dataset.highlight="y"
const wordNode = node.splitText(match.index)
wordNode.splitText(match[0].length); // 切割成前 关键词 后三个Text 节点
const wordNew = document.createTextNode(wordNode.data);
highlightEl.appendChild(wordNew);//highlight 节点构建成功
wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替换该文本节点
}
} else if (node.nodeType == 1 && node.dataset.highlight!="y"
) {
for (var i = 0; i < node.childNodes.length; i++) {
highlight(node.childNodes[i], reg);
i++
}
}
}
总结
以上所述是小编给大家介绍的HTML高亮关键字的完美解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网