当前位置：首页 > JavaScript

js实现全局搜索

2026-03-16 01:30:27JavaScript

实现全局搜索的方法

在JavaScript中实现全局搜索功能，可以通过以下几种方式来完成。以下方法适用于前端实现，可以根据需求选择合适的方式。

使用DOM遍历实现搜索

通过遍历DOM元素，匹配关键词并高亮显示结果。这种方法适用于静态页面或简单的动态内容。

js实现全局搜索

function globalSearch(keyword) {
  const elements = document.querySelectorAll('body *');
  elements.forEach(element => {
    if (element.childNodes.length > 0) {
      element.childNodes.forEach(child => {
        if (child.nodeType === Node.TEXT_NODE && child.textContent.includes(keyword)) {
          const span = document.createElement('span');
          span.style.backgroundColor = 'yellow';
          span.textContent = child.textContent;
          child.replaceWith(span);
        }
      });
    }
  });
}

使用事件监听实现动态搜索

通过监听输入框的变化，实时触发搜索逻辑。这种方法适用于需要动态响应的场景。

const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', (e) => {
  const keyword = e.target.value.trim();
  if (keyword) {
    globalSearch(keyword);
  } else {
    clearHighlights();
  }
});

function clearHighlights() {
  const highlights = document.querySelectorAll('span[style="background-color: yellow;"]');
  highlights.forEach(highlight => {
    highlight.replaceWith(highlight.textContent);
  });
}

使用正则表达式增强搜索

通过正则表达式实现更灵活的匹配，例如不区分大小写或部分匹配。

js实现全局搜索

function globalSearchWithRegex(keyword) {
  const regex = new RegExp(keyword, 'gi');
  const elements = document.querySelectorAll('body *');
  elements.forEach(element => {
    if (element.childNodes.length > 0) {
      element.childNodes.forEach(child => {
        if (child.nodeType === Node.TEXT_NODE && regex.test(child.textContent)) {
          const span = document.createElement('span');
          span.style.backgroundColor = 'yellow';
          span.textContent = child.textContent.replace(regex, match => `<mark>${match}</mark>`);
          child.replaceWith(span);
        }
      });
    }
  });
}

结合后端API实现全局搜索

如果数据量较大或需要跨页面搜索，可以调用后端API获取搜索结果并动态渲染。

async function searchWithAPI(keyword) {
  const response = await fetch(`/api/search?q=${keyword}`);
  const results = await response.json();
  renderResults(results);
}

function renderResults(results) {
  const resultsContainer = document.getElementById('results');
  resultsContainer.innerHTML = '';
  results.forEach(result => {
    const div = document.createElement('div');
    div.textContent = result.title;
    resultsContainer.appendChild(div);
  });
}

使用第三方库实现高级搜索

对于复杂的搜索需求，可以使用第三方库如Lunr.js或Fuse.js，它们提供了全文搜索、模糊匹配等功能。

const fuse = new Fuse(data, {
  keys: ['title', 'content'],
  threshold: 0.4
});

function searchWithFuse(keyword) {
  const results = fuse.search(keyword);
  renderResults(results);
}