js搜索页面内容

在JavaScript中搜索页面内容通常指的是在网页上实现一个功能，允许用户输入关键词并搜索页面上的文本，然后高亮显示匹配的结果。下面我会给出一个基础的概念解释，以及一个简单的示例代码来实现这个功能。

基础概念：

DOM操作：JavaScript可以通过DOM（文档对象模型）来访问和操作网页上的元素和内容。
正则表达式：用于匹配字符串中符合特定模式的文本。
事件监听：JavaScript可以监听用户的输入事件，如键盘输入，然后执行相应的操作。

示例代码：

以下是一个简单的JavaScript搜索页面内容的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Page Content</title>
<style>
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>

<input type="text" id="searchInput" placeholder="Search...">
<button onclick="searchContent()">Search</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (更多文本内容)</p>

<script>
function searchContent() {
    // 获取用户输入的关键词并去除首尾空格
    var keyword = document.getElementById('searchInput').value.trim();
    // 如果关键词为空，则不执行搜索
    if (keyword === '') return;

    // 移除之前的高亮显示
    var highlights = document.getElementsByClassName('highlight');
    while (highlights.length > 0) {
        highlights[0].classList.remove('highlight');
    }

    // 创建正则表达式，'gi'表示全局和不区分大小写
    var regex = new RegExp(`(${keyword})`, 'gi');

    // 获取页面上所有的文本内容
    var textNodes = getTextNodes(document.body);

    // 遍历文本节点并搜索关键词
    textNodes.forEach(function(node) {
        if (node.nodeType === 3) { // 文本节点
            var match = node.nodeValue.match(regex);
            if (match) {
                var span = document.createElement('span');
                var beforeText = node.nodeValue.substring(0, match.index);
                var matchText = node.nodeValue.substring(match.index, match.index + keyword.length);
                var afterText = node.nodeValue.substring(match.index + keyword.length);

                span.appendChild(document.createTextNode(beforeText));
                var highlightSpan = document.createElement('span');
                highlightSpan.classList.add('highlight');
                highlightSpan.appendChild(document.createTextNode(matchText));
                span.appendChild(highlightSpan);
                span.appendChild(document.createTextNode(afterText));

                node.parentNode.replaceChild(span, node);
            }
        }
    });
}

// 递归获取DOM树中的所有文本节点
function getTextNodes(element) {
    var nodes = [];
    for (var i = 0; i < element.childNodes.length; i++) {
        var child = element.childNodes[i];
        if (child.nodeType === 3) { // 文本节点
            nodes.push(child);
        } else if (child.nodeType === 1) { // 元素节点
            nodes = nodes.concat(getTextNodes(child));
        }
    }
    return nodes;
}
</script>

</body>
</html>

这个示例代码实现了一个简单的页面内容搜索功能。用户可以在输入框中输入关键词，然后点击搜索按钮来高亮显示页面上所有匹配的文本。这个示例使用了DOM操作来访问和修改页面内容，正则表达式来匹配关键词，以及事件监听来响应用户的搜索操作。