利用原生JS实现类似浏览器查找高亮功能(转载）

利用原生JS实现类似浏览器查找高亮功能

在完成 Navify 时，增加一个类似浏览器ctrl+f查找并该高亮的功能，在此进行一点总结：

需求

在.content中有许多.box，需要在.box中找出搜索的字符串，再将无搜索结果的.box隐藏掉，此外还要将字符串高亮。这个页面用vue.js实现了数据交互，不想用jquery来实现得查找高亮功能，得用原生js来实现该功能。

原理

将各个.box的文本内容提取，利用正则判断是否匹配字符串，若无搜索字符串，则隐藏该.box；否则继续找到具体的与该字符串匹配的结点及文本。通过对父节点的childNodes，然后利用nodeType筛选出文本结点，并利用匹配字符串将该文本结点分割，然后给匹配字符串加上<span class="search-highlight">，同时将原文本结点放入<template>中暂存，最后一起拼接后插入替换匹配结点。
更改或删除搜索的字符串时，将去掉.search-highlight，遍历所有的.search-highlight，找到里面父节点中的<template>，将<template>内容与父节点的内容替换，从而达到复原的效果。

思路&代码

// 原生事件监听
document.querySelector("search").addEventListener('input', function(e){ var target = e.target, value = target.value; // value即搜索的字符串 const text = String(value).trim(); const reg = new RegExp(text, 'ig'); // 匹配全局大小写 const content = document.querySelector('.content'); const box = document.querySelectorAll('.box'); this.rmHighlight(content); // 移除所有之前的高亮内容 box.forEach((el) => { // 遍历.box el.classList.remove('hidden'); // 清除之前无搜索结果时隐藏的.box if (!text) return; // 如果搜索的字符串为空，不进行下列操作 let match = false; // 该box内是否含有匹配内容 const range = el.querySelectorAll('.section-heading, .list-title, .item-name'); // 可搜索区域 range.forEach((item) => { if (item.innerText.match(reg)) { this.highlight(item, text); // 目标结点匹配则执行高亮标记函数 match = true; } }); if (!match) { // 是否有匹配，从而对.box进行隐藏 el.classList.add('hidden'); } else { el.classList.remove('hidden'); } }); } 

// highlight函数
function highlight(el, value){ const childList = el.childNodes; if (!childList.length || !value.length) return; // 无子节点或无查询值，则不进行下列操作 const reg = new RegExp(value, 'ig'); childList.forEach((el) => { // 遍历其内子节点 if (el.nodeType === 1 // 如果是元素节点 && el.classList && !el.classList.contains('search-highlight') // 而且没有被标记高亮 && !/(script|style|template)/i.test(el.tagName)) { // 并且元素标签不是script或style或template等特殊元素 this.highlight(el, value); // 那么就继续遍历(递归)该元素节点 } else if (el.nodeType === 3) { // 如果是文本节点 const highlightList = el.data.match(reg); // 得出文本节点匹配到的字符串数组 if (!highlightList) return; const splitTextList = el.data.split(reg); // 分割多次匹配 // 遍历分割的匹配数组，将匹配出的字符串加上.highlight并依次插入DOM el.parentNode.innerHTML = splitTextList.reduce( (html, splitText, i) => html + splitText + ( (i < splitTextList.length - 1) ? `<span class="search-highlight">${highlightList[i]}</span>` : `<template search-highlight>${el.data}</template>` ), // 同时给为匹配的template用于后续恢复 ''); } }); } 

// 移除.highlight函数
function rmHighlight(el) { const highlightSpans = el.querySelectorAll('span.search-highlight'); highlightSpans.forEach((el) => { // 找到所有.highlight并遍历 if (!el.parentNode) return; const template = el.parentNode.querySelector('template[search-highlight]'); if (!template) return; // 找到父节点中的template，将自己内容替换为template内容 el.parentNode.innerHTML = el.parentNode.querySelector('template[search-highlight]').innerHTML; }); } 

完整代码参见 navify (Github)