利用原生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)

巴特西

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

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

需求

原理

思路&代码

最新文章

热门文章