纯js如何实现高度可扩展关键词高亮

发布时间：2022-08-31 09:59:59 作者：iii
来源：亿速云阅读：173

纯JS如何实现高度可扩展关键词高亮

引言

在现代Web开发中，关键词高亮是一个常见的需求。无论是在搜索引擎结果页、文档编辑器，还是在数据分析工具中，关键词高亮都能帮助用户快速定位重要信息。本文将详细介绍如何使用纯JavaScript实现一个高度可扩展的关键词高亮功能。

关键词高亮的基本原理

关键词高亮的基本原理是通过JavaScript操作DOM，将指定的关键词用特定的HTML标签包裹起来，并应用CSS样式。例如，将关键词“JavaScript”高亮显示：

<p>This is a JavaScript example.</p>

高亮后：

<p>This is a <span class="highlight">JavaScript</span> example.</p>

实现基础关键词高亮

1. 获取文本节点

首先，我们需要获取需要高亮的文本节点。可以通过document.createTreeWalker或NodeIterator来遍历DOM树，找到所有的文本节点。

function getTextNodes(node) {
    let textNodes = [];
    let walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null, false);
    while (walker.nextNode()) {
        textNodes.push(walker.currentNode);
    }
    return textNodes;
}

2. 高亮关键词

接下来，我们需要将关键词用<span>标签包裹起来。可以使用String.prototype.replace方法来实现。

function highlightKeyword(textNode, keyword) {
    let text = textNode.nodeValue;
    let regex = new RegExp(`(${keyword})`, 'gi');
    let newText = text.replace(regex, '<span class="highlight">$1</span>');
    if (newText !== text) {
        let span = document.createElement('span');
        span.innerHTML = newText;
        textNode.parentNode.replaceChild(span, textNode);
    }
}

3. 应用高亮

最后，我们将上述方法应用到所有的文本节点上。

function applyHighlight(node, keyword) {
    let textNodes = getTextNodes(node);
    textNodes.forEach(textNode => highlightKeyword(textNode, keyword));
}

处理复杂文本结构

在实际应用中，文本结构可能非常复杂，包含多个嵌套的HTML标签。为了确保高亮功能在这些情况下也能正常工作，我们需要对上述方法进行改进。

1. 递归处理子节点

我们可以通过递归的方式处理所有的子节点，确保每个文本节点都能被正确高亮。

function applyHighlightRecursive(node, keyword) {
    if (node.nodeType === Node.TEXT_NODE) {
        highlightKeyword(node, keyword);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
        Array.from(node.childNodes).forEach(child => applyHighlightRecursive(child, keyword));
    }
}

2. 处理嵌套高亮

如果文本中已经存在高亮标签，我们需要确保不会重复高亮。可以通过检查节点的父节点是否为高亮标签来实现。

function highlightKeyword(textNode, keyword) {
    let text = textNode.nodeValue;
    let regex = new RegExp(`(${keyword})`, 'gi');
    let newText = text.replace(regex, '<span class="highlight">$1</span>');
    if (newText !== text && textNode.parentNode.nodeName !== 'SPAN') {
        let span = document.createElement('span');
        span.innerHTML = newText;
        textNode.parentNode.replaceChild(span, textNode);
    }
}

支持多关键词高亮

在实际应用中，我们可能需要同时高亮多个关键词。为了实现这一点，我们可以对上述方法进行扩展。

1. 高亮多个关键词

我们可以将关键词列表传递给高亮函数，并在每个文本节点上依次应用高亮。

function applyHighlightMulti(node, keywords) {
    keywords.forEach(keyword => applyHighlightRecursive(node, keyword));
}

2. 避免重复高亮

为了避免多个关键词重复高亮同一段文本，我们需要在每次高亮后检查文本节点是否已经被高亮。

function highlightKeywordMulti(textNode, keyword) {
    let text = textNode.nodeValue;
    let regex = new RegExp(`(${keyword})`, 'gi');
    let newText = text.replace(regex, '<span class="highlight">$1</span>');
    if (newText !== text && textNode.parentNode.nodeName !== 'SPAN') {
        let span = document.createElement('span');
        span.innerHTML = newText;
        textNode.parentNode.replaceChild(span, textNode);
    }
}

高亮样式的自定义

为了让高亮效果更加灵活，我们可以通过CSS自定义高亮样式。

1. 定义CSS样式

我们可以在CSS中定义高亮样式，并通过JavaScript动态添加或修改样式。

.highlight {
    background-color: yellow;
    font-weight: bold;
}

2. 动态修改样式

我们可以通过JavaScript动态修改高亮样式，例如根据关键词的重要性调整颜色。

function applyHighlightStyle(style) {
    let styleElement = document.createElement('style');
    styleElement.innerHTML = `.highlight { ${style} }`;
    document.head.appendChild(styleElement);
}

性能优化

在处理大量文本或频繁更新高亮时，性能可能成为一个问题。我们可以通过以下方法优化性能。

1. 使用DocumentFragment

使用DocumentFragment可以减少DOM操作次数，提高性能。

function applyHighlightOptimized(node, keyword) {
    let fragment = document.createDocumentFragment();
    let textNodes = getTextNodes(node);
    textNodes.forEach(textNode => {
        let span = document.createElement('span');
        span.innerHTML = textNode.nodeValue.replace(new RegExp(`(${keyword})`, 'gi'), '<span class="highlight">$1</span>');
        fragment.appendChild(span);
    });
    node.innerHTML = '';
    node.appendChild(fragment);
}

2. 使用Web Workers

对于非常大的文本，可以使用Web Workers在后台线程中进行高亮处理，避免阻塞主线程。

let worker = new Worker('highlightWorker.js');
worker.onmessage = function(event) {
    document.getElementById('content').innerHTML = event.data;
};
worker.postMessage({ text: document.getElementById('content').innerText, keywords: ['JavaScript', 'HTML'] });

扩展功能

除了基本的关键词高亮，我们还可以扩展更多功能，例如：

1. 高亮匹配的上下文

可以高亮关键词周围的上下文，帮助用户更好地理解匹配的内容。

function highlightContext(textNode, keyword, contextLength) {
    let text = textNode.nodeValue;
    let regex = new RegExp(`(.{0,${contextLength}}${keyword}.{0,${contextLength}})`, 'gi');
    let newText = text.replace(regex, '<span class="highlight">$1</span>');
    if (newText !== text) {
        let span = document.createElement('span');
        span.innerHTML = newText;
        textNode.parentNode.replaceChild(span, textNode);
    }
}

2. 支持正则表达式

可以支持用户输入正则表达式进行高亮，提供更灵活的匹配方式。

function highlightRegex(textNode, regex) {
    let text = textNode.nodeValue;
    let newText = text.replace(regex, '<span class="highlight">$1</span>');
    if (newText !== text) {
        let span = document.createElement('span');
        span.innerHTML = newText;
        textNode.parentNode.replaceChild(span, textNode);
    }
}

3. 高亮动画

可以为高亮效果添加动画，提升用户体验。

@keyframes highlightAnimation {
    0% { background-color: yellow; }
    50% { background-color: orange; }
    100% { background-color: yellow; }
}

.highlight {
    animation: highlightAnimation 1s infinite;
}

总结

通过本文的介绍，我们详细探讨了如何使用纯JavaScript实现一个高度可扩展的关键词高亮功能。从基础的高亮实现到处理复杂文本结构，再到性能优化和功能扩展，我们逐步构建了一个功能强大且灵活的关键词高亮工具。希望本文能为你提供有价值的参考，帮助你在实际项目中实现类似的功能。