js 实现网页搜索
实现网页搜索功能
在JavaScript中实现网页搜索功能可以通过多种方式完成，包括前端本地搜索和调用后端API进行远程搜索。
本地搜索实现
使用纯前端技术实现本地搜索，适用于静态网页或数据量较小的场景：
function localSearch(query, elements) {
return elements.filter(element => {
return element.textContent.toLowerCase().includes(query.toLowerCase());
});
}
const searchInput = document.getElementById('search-input');
const items = Array.from(document.querySelectorAll('.searchable-item'));
searchInput.addEventListener('input', (e) => {
const results = localSearch(e.target.value, items);
items.forEach(item => item.style.display = 'none');
results.forEach(result => result.style.display = 'block');
});调用搜索引擎API
对于需要更强大搜索能力的场景，可以集成第三方搜索引擎API：
async function searchWithAPI(query) {
const API_KEY = 'YOUR_API_KEY';
const url = `https://www.googleapis.com/customsearch/v1?q=${encodeURIComponent(query)}&key=${API_KEY}`;
try {
const response = await fetch(url);
const data = await response.json();
return data.items || [];
} catch (error) {
console.error('Search error:', error);
return [];
}
}
document.getElementById('search-btn').addEventListener('click', async () => {
const query = document.getElementById('search-input').value;
const results = await searchWithAPI(query);
displayResults(results);
});模糊搜索实现
实现更智能的模糊搜索功能：
function fuzzySearch(query, items) {
const regex = new RegExp(query.split('').join('.*'), 'i');
return items.filter(item => regex.test(item.text));
}搜索结果高亮显示
对匹配的搜索结果进行高亮处理：
function highlightText(text, query) {
const regex = new RegExp(`(${query})`, 'gi');
return text.replace(regex, '<span class="highlight">$1</span>');
}搜索性能优化
对于大数据量搜索，考虑性能优化：
// 使用Web Worker进行后台搜索
const searchWorker = new Worker('search-worker.js');
searchWorker.onmessage = function(e) {
displayResults(e.data);
};
document.getElementById('search-input').addEventListener('input', (e) => {
searchWorker.postMessage(e.target.value);
});以上方法可以根据具体需求组合使用，构建适合不同场景的网页搜索功能。对于更复杂的搜索需求，建议结合后端服务实现。
