当前位置：首页 > JavaScript

js 实现文字搜索

2026-02-03 06:38:13JavaScript

实现文字搜索功能

在JavaScript中实现文字搜索功能可以通过多种方式完成，以下介绍几种常见的方法：

使用字符串的`includes()`方法

includes()方法用于检查字符串中是否包含指定的子字符串，返回布尔值。

const text = "Hello, welcome to the world of JavaScript";
const searchTerm = "world";
const isFound = text.includes(searchTerm);
console.log(isFound); // true

使用正则表达式匹配

正则表达式提供了更强大的搜索能力，可以处理大小写敏感或全局匹配等需求。

js 实现文字搜索

const text = "Hello, welcome to the world of JavaScript";
const searchTerm = /world/i; // 'i'表示不区分大小写
const isFound = searchTerm.test(text);
console.log(isFound); // true

在数组中搜索文本

如果需要在数组中搜索包含特定文本的元素，可以使用filter()或find()方法。

const array = ["apple", "banana", "cherry", "date"];
const searchTerm = "a";
const results = array.filter(item => item.includes(searchTerm));
console.log(results); // ["apple", "banana", "date"]

实现高亮显示搜索词

为了增强用户体验，可以实现高亮显示搜索到的文本。

js 实现文字搜索

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

const originalText = "Hello, welcome to the world of JavaScript";
const highlightedText = highlightText(originalText, "world");
document.body.innerHTML = highlightedText;

在DOM元素中搜索文本

在网页中搜索特定文本并高亮显示。

function searchInPage(searchTerm) {
    const elements = document.querySelectorAll('p, div, span'); // 选择需要搜索的元素
    elements.forEach(element => {
        const text = element.textContent;
        if (text.includes(searchTerm)) {
            const highlighted = highlightText(text, searchTerm);
            element.innerHTML = highlighted;
        }
    });
}

searchInPage("JavaScript");

使用第三方库

如果需要更复杂的搜索功能，可以考虑使用第三方库如Fuse.js，它支持模糊搜索和更高级的匹配算法。

const fuse = new Fuse(["apple", "banana", "cherry"], {
    includeScore: true,
    threshold: 0.3
});
const results = fuse.search("appl");
console.log(results);