资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

JS实现文字高亮显示的多种方法与实战案例

创作时间:

作者:

@小白创作中心

JS实现文字高亮显示的多种方法与实战案例

引用

来源

https://docs.pingcode.com/baike/2330397

在网页开发中，高亮显示特定文字是一种常见的需求，比如在搜索结果中突出显示关键词，或者在文档编辑器中高亮显示用户选中的文本。本文将详细介绍如何使用JavaScript实现文字高亮显示，包括正则表达式、DOM操作和封装函数等方法，并探讨实际应用场景和性能优化技巧。

正则表达式

正则表达式是一种强大的工具，可以用来搜索、匹配和替换文本。通过正则表达式，我们可以方便地找到需要高亮显示的文字。

基本概念

正则表达式是一种模式，用于描述字符组合。JavaScript通过RegExp对象来表示正则表达式，并提供了一些方法，比如match()、replace()等。

实现步骤

获取需要处理的文本。
创建正则表达式，匹配需要高亮的文字。
使用replace()方法，将匹配的文字替换为带有高亮样式的HTML元素。

function highlightText(text, keyword) {
    // 创建一个正则表达式，使用全局匹配和不区分大小写
    const regex = new RegExp(`(${keyword})`, 'gi');
    // 使用replace方法将匹配的文字替换为带有样式的HTML元素
    return text.replace(regex, '<span class="highlight">$1</span>');
}

// 示例
const content = "This is a sample text to demonstrate highlighting.";
const keyword = "text";
const highlightedContent = highlightText(content, keyword);
console.log(highlightedContent);

应用场景

这种方法适用于需要在大量文本中快速找到并高亮显示特定关键词的场景，比如搜索结果页面、在线文档编辑器等。

DOM操作

DOM操作是指通过JavaScript对HTML文档的结构、样式和内容进行操作。通过遍历DOM树，我们可以找到并修改需要高亮显示的文本节点。

基本概念

DOM（文档对象模型）是HTML和XML文档的编程接口。它提供了一系列API，用于访问和操作文档的结构和内容。

实现步骤

获取目标DOM节点。
遍历目标节点的子节点，找到包含目标文字的文本节点。
将包含目标文字的文本节点拆分成多个节点，并插入带有高亮样式的元素。

function highlightTextInNode(node, keyword) {
    if (node.nodeType === 3) { // 文本节点
        const regex = new RegExp(`(${keyword})`, 'gi');
        const matches = node.data.match(regex);
        if (matches) {
            const parentNode = node.parentNode;
            const fragment = document.createDocumentFragment();
            let lastIndex = 0;
            matches.forEach(match => {
                const index = node.data.indexOf(match, lastIndex);
                if (index > lastIndex) {
                    fragment.appendChild(document.createTextNode(node.data.slice(lastIndex, index)));
                }
                const span = document.createElement('span');
                span.className = 'highlight';
                span.textContent = match;
                fragment.appendChild(span);
                lastIndex = index + match.length;
            });
            if (lastIndex < node.data.length) {
                fragment.appendChild(document.createTextNode(node.data.slice(lastIndex)));
            }
            parentNode.replaceChild(fragment, node);
        }
    } else if (node.nodeType === 1 && node.childNodes) { // 元素节点
        node.childNodes.forEach(childNode => highlightTextInNode(childNode, keyword));
    }
}

// 示例
const contentNode = document.getElementById('content');
const keyword = "text";
highlightTextInNode(contentNode, keyword);

应用场景

这种方法适用于需要对页面中某个特定区域的文本进行高亮显示的场景，比如网页中的文章、评论区等。

封装函数

为了方便使用，我们可以将高亮显示的功能封装成一个通用的函数。这样在需要高亮显示文字时，只需要调用这个函数即可。

基本概念

封装函数是指将一组相关的功能代码封装在一个函数中，使其具有独立性和可重复使用性。

实现步骤

创建一个通用的高亮显示函数，接受文本内容和关键词作为参数。
在函数内部调用正则表达式或DOM操作的方法，实现高亮显示功能。

function highlightText(content, keyword) {
    const regex = new RegExp(`(${keyword})`, 'gi');
    return content.replace(regex, '<span class="highlight">$1</span>');
}

function highlightTextInNode(node, keyword) {
    if (node.nodeType === 3) { // 文本节点
        const regex = new RegExp(`(${keyword})`, 'gi');
        const matches = node.data.match(regex);
        if (matches) {
            const parentNode = node.parentNode;
            const fragment = document.createDocumentFragment();
            let lastIndex = 0;
            matches.forEach(match => {
                const index = node.data.indexOf(match, lastIndex);
                if (index > lastIndex) {
                    fragment.appendChild(document.createTextNode(node.data.slice(lastIndex, index)));
                }
                const span = document.createElement('span');
                span.className = 'highlight';
                span.textContent = match;
                fragment.appendChild(span);
                lastIndex = index + match.length;
            });
            if (lastIndex < node.data.length) {
                fragment.appendChild(document.createTextNode(node.data.slice(lastIndex)));
            }
            parentNode.replaceChild(fragment, node);
        }
    } else if (node.nodeType === 1 && node.childNodes) { // 元素节点
        node.childNodes.forEach(childNode => highlightTextInNode(childNode, keyword));
    }
}

// 示例
const content = "This is a sample text to demonstrate highlighting.";
const keyword = "text";
const highlightedContent = highlightText(content, keyword);
console.log(highlightedContent);

const contentNode = document.getElementById('content');
highlightTextInNode(contentNode, keyword);

应用场景

这种方法适用于需要在多个地方复用高亮显示功能的场景，比如在不同页面、不同模块中都需要实现高亮显示功能时。

优化和性能提升

在实际应用中，尤其是处理大规模文本数据时，性能是一个需要重点考虑的问题。以下是一些优化和性能提升的建议：

减少DOM操作：频繁的DOM操作会导致页面重绘和重排，从而影响性能。可以通过一次性操作多个节点，使用DocumentFragment等方法减少DOM操作的次数。
缓存结果：对于重复搜索的关键词，可以将高亮显示的结果缓存起来，避免每次都重新计算。
使用Web Worker：对于大规模文本处理，可以使用Web Worker将高亮显示的计算任务放到后台线程中进行，避免阻塞主线程。
合并相邻文本节点：在高亮显示过程中，可能会生成大量的小文本节点。可以将相邻的文本节点合并，减少DOM节点的数量。