js如何给文字设置高亮

使用JavaScript给文字设置高亮，可以通过操作DOM、添加CSS类名、使用正则表达式等方法来实现。 一种常见的方法是通过JavaScript找到需要高亮的文字，并为其包裹一个带有特定样式的HTML元素，例如标签。然后，通过CSS为这个元素设置高亮样式。具体操作步骤包括：获取目标文本、创建包裹元素、插入到DOM中。以下将详细描述这一过程。

一、获取目标文本

首先，我们需要找到要高亮的目标文本。这通常可以通过用户输入、文本匹配或其他逻辑来确定。假设我们要高亮一个网页中的某个关键词，可以通过以下方法获取目标文本。

// 假设要高亮的关键词是 "highlight"
const keyword = "highlight";

二、遍历DOM节点

接下来，我们需要遍历DOM节点，找到包含目标文本的节点，并对这些节点进行处理。可以使用递归遍历的方法来实现这一点。

function highlightText(node, keyword) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        const regex = new RegExp(`(${keyword})`, 'gi');
        const text = node.nodeValue;
        if (regex.test(text)) {
            const span = document.createElement('span');
            span.innerHTML = text.replace(regex, `<mark>$1</mark>`);
            node.parentNode.replaceChild(span, node);
        }
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (let i = 0; i < node.childNodes.length; i++) {
            highlightText(node.childNodes[i], keyword);
        }
    }
}
// 遍历整个文档
highlightText(document.body, keyword);

三、创建包裹元素并插入DOM

在找到目标文本之后，需要创建一个包裹元素，通常是或，并将其插入到DOM中。这里我们使用标签来包裹高亮的文本，因为标签在HTML5中专门用于高亮显示文本。

四、添加CSS样式

通过CSS为包裹元素添加高亮样式。例如，可以定义一个.highlight类来设置背景色和字体颜色。

.highlight {
    background-color: yellow;
    color: black;
}

然后，在JavaScript中为包裹元素添加这个类名：

const span = document.createElement('span');
span.className = 'highlight';
span.textContent = matchedText;

五、处理复杂情况

在实际应用中，我们可能需要处理更多复杂的情况，例如在多个元素中高亮、处理大小写敏感、清除高亮等。以下是一些扩展方法。

1、处理多个关键词高亮

可以将多个关键词存储在一个数组中，然后遍历这个数组，对每个关键词进行高亮处理。

const keywords = ["highlight", "text", "example"];
keywords.forEach(keyword => highlightText(document.body, keyword));

2、处理大小写敏感

可以通过正则表达式的i标志来忽略大小写。

const regex = new RegExp(`(${keyword})`, 'gi');

3、清除高亮

在某些情况下，可能需要清除已高亮的文本。可以通过查找所有带有高亮类名的元素，并移除这些元素的高亮样式。

function removeHighlight() {
    const highlightedElements = document.querySelectorAll('.highlight');
    highlightedElements.forEach(element => {
        const parent = element.parentNode;
        parent.replaceChild(document.createTextNode(element.textContent), element);
    });
}

六、综合示例

以下是一个完整的示例，包含了高亮处理、样式应用和清除高亮的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Highlight Example</title>
    <style>
        .highlight {
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <p>This is an example text to demonstrate text highlight using JavaScript.</p>
    <p>Feel free to modify the script to highlight different keywords or phrases.</p>
    <script>
        function highlightText(node, keyword) {
            if (node.nodeType === 3) { // Node.TEXT_NODE
                const regex = new RegExp(`(${keyword})`, 'gi');
                const text = node.nodeValue;
                if (regex.test(text)) {
                    const span = document.createElement('span');
                    span.innerHTML = text.replace(regex, `<span class="highlight">$1</span>`);
                    node.parentNode.replaceChild(span, node);
                }
            } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
                for (let i = 0; i < node.childNodes.length; i++) {
                    highlightText(node.childNodes[i], keyword);
                }
            }
        }
        function removeHighlight() {
            const highlightedElements = document.querySelectorAll('.highlight');
            highlightedElements.forEach(element => {
                const parent = element.parentNode;
                parent.replaceChild(document.createTextNode(element.textContent), element);
            });
        }
        const keywords = ["highlight", "text", "example"];
        keywords.forEach(keyword => highlightText(document.body, keyword));
        // To remove highlight, you can call removeHighlight()
        // removeHighlight();
    </script>
</body>
</html>

通过以上方法，可以实现JavaScript对文本的高亮显示。实际应用中，可以根据需求进行优化和扩展，如增加用户交互功能、支持更多的文本匹配规则等。无论是简单的关键词高亮，还是复杂的文本处理，都可以通过JavaScript和CSS灵活实现。