当前位置：首页 > JavaScript

js 实现文字搜索

2026-03-16 07:36:23JavaScript

实现文字搜索的基本方法

在JavaScript中实现文字搜索可以通过多种方式完成，常见的场景包括在字符串中搜索关键词、在DOM元素中高亮匹配内容或在数组中过滤符合条件的数据。以下是几种典型实现方法：

字符串内搜索

使用字符串方法（如includes()、indexOf()或正则表达式）检查目标字符串是否包含搜索词：

const text = "Hello world, welcome to JavaScript!";
const searchTerm = "world";

// 方法1：includes()（返回布尔值）
const isFound = text.includes(searchTerm); // true

// 方法2：indexOf()（返回位置索引，未找到返回-1）
const position = text.indexOf(searchTerm); // 6

// 方法3：正则表达式（支持复杂匹配）
const regex = new RegExp(searchTerm, "gi");
const matches = text.match(regex); // ["world"]

DOM元素内容搜索

在网页中高亮或过滤匹配的文本内容：

function highlightText(searchTerm) {
  const elements = document.querySelectorAll(".content");
  elements.forEach(el => {
    const html = el.innerHTML;
    const highlighted = html.replace(
      new RegExp(searchTerm, "gi"),
      match => `<span class="highlight">${match}</span>`
    );
    el.innerHTML = highlighted;
  });
}

// 调用示例
highlightText("JavaScript");

CSS样式补充：

.highlight {
  background-color: yellow;
}

数组数据过滤

通过filter()和搜索条件筛选数组中的对象：

const data = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" }
];

function searchItems(keyword) {
  return data.filter(item => 
    item.name.toLowerCase().includes(keyword.toLowerCase())
  );
}

// 调用示例
const results = searchItems("an"); 
// 输出: [{id:2, name:"Banana"}, {id:3, name:"Orange"}]

模糊搜索实现

通过Levenshtein距离或拼音库支持模糊匹配：

js 实现文字搜索

// 示例：简易模糊搜索（忽略大小写和部分字符）
function fuzzySearch(text, query) {
  const pattern = query.split("").join(".*");
  const regex = new RegExp(pattern, "i");
  return regex.test(text);
}

// 调用示例
fuzzySearch("Microsoft", "mso"); // true