当前位置：首页 > JavaScript

js实现关键字搜索功能

2026-04-05 01:36:20JavaScript

实现关键字搜索功能

在JavaScript中实现关键字搜索功能通常涉及对数组或DOM元素的过滤。以下是几种常见场景的实现方法：

数组过滤搜索

对于数据数组的搜索，可以使用filter()和includes()方法：

const data = ['apple', 'banana', 'orange', 'grape'];
const keyword = 'ap';

const results = data.filter(item => 
  item.toLowerCase().includes(keyword.toLowerCase())
);

console.log(results); // ['apple', 'grape']

DOM元素搜索

在网页中搜索匹配的DOM元素：

js实现关键字搜索功能

function searchDOM(keyword) {
  const elements = document.querySelectorAll('.searchable');
  const lowerKeyword = keyword.toLowerCase();

  elements.forEach(el => {
    const text = el.textContent.toLowerCase();
    el.style.display = text.includes(lowerKeyword) ? '' : 'none';
  });
}

// 使用示例
document.getElementById('search-input').addEventListener('input', (e) => {
  searchDOM(e.target.value);
});

对象数组搜索

当搜索对象数组时，可以指定要搜索的属性：

const products = [
  { id: 1, name: 'Laptop', category: 'Electronics' },
  { id: 2, name: 'Shirt', category: 'Clothing' }
];

function searchObjects(array, keyword, ...props) {
  const lowerKeyword = keyword.toLowerCase();
  return array.filter(item => 
    props.some(prop => 
      String(item[prop]).toLowerCase().includes(lowerKeyword)
    )
  );
}

// 使用示例
const found = searchObjects(products, 'lap', 'name', 'category');
console.log(found); // [{id: 1, name: 'Laptop', category: 'Electronics'}]

实现模糊搜索

对于更灵活的搜索，可以使用正则表达式实现模糊匹配：

js实现关键字搜索功能

function fuzzySearch(text, keyword) {
  const pattern = keyword.split('').join('.*');
  const regex = new RegExp(pattern, 'i');
  return regex.test(text);
}

const items = ['JavaScript', 'Java', 'Python'];
const results = items.filter(item => fuzzySearch(item, 'jav'));
console.log(results); // ['JavaScript', 'Java']

添加搜索高亮

搜索后高亮显示匹配的关键字：

function highlightText(element, keyword) {
  const regex = new RegExp(keyword, 'gi');
  element.innerHTML = element.textContent.replace(
    regex, 
    match => `<span class="highlight">${match}</span>`
  );
}