HTML 如何在页面中搜索关键字_HTML 搜索关键字的代码示例是什么

要在 HTML 页面中搜索关键字,可以使用 JavaScript 的 document.body.innerText 属性获取页面的文本内容,使用正则表达式进行匹配。下面是一个示例代码:

function searchKeyword(keyword) {
    // 获取页面文本内容
    var pageText = document.body.innerText;
    
    // 使用正则表达式进行匹配
    var regex = new RegExp(keyword, 'gi');
    var matches = pageText.match(regex);
    
    // 输出匹配结果
    if (matches) {
        console.log('Found ' + matches.length + ' matches for "' + keyword + '"');
    } else {
        console.log('No matches found for "' + keyword + '"');
    }
}

在上述代码中,我们首先使用 document.body.innerText 获取页面的文本内容,使用正则表达式进行匹配。正则表达式中的 g 标志表示全局匹配,i 标志表示不区分大小写。 找到匹配项,我们会在控制台输出匹配的数量;否则,输出没有找到匹配的信息。 除上述方法,我们还可以在页面中添加一个输入框,让用户输入关键字进行搜索。下面是一个示例代码:

Search

在这个示例中,我们添加一个输入框和一个搜索按钮。当用户点击搜索按钮时,会调用 searchKeyword() 函数,传入输入框中的关键字进行搜索。搜索结果会显示在页面上的一个 div 元素中。 通过以上两种方法,我们可以在 HTML 页面中轻松地实现关键字搜索功能。这可以帮助用户快速找到所需的信息,提高页面的可用性。无论是使用 JavaScript 直接搜索页面文本,还是在输入框中进行搜索,都是常见的 HTML 页面搜索技术。