本文介绍如何扩展 javascript 搜索功能，使其不再局限于单一 html 标签（如仅 `h1`），而是支持同时检索 `h1`、`h3` 和 `p` 等多个标签内的文本内容，并实现大小写不敏感、部分匹配的实时过滤效果。
在构建动态搜索栏时，常见误区是仅针对某一个标题标签（如 h1）进行内容匹配，导致搜索范围过窄——用户输入“Roleplaying Game”却因该文本位于
标签中而无法命中目标卡片。根本原因在于原代码使用 item.querySelector("h1") 强制限定单个元素，且未处理查询失败（如 h1 不存在时返回 null）引发的运行时错误。
正确解法是：先批量获取所有候选标签元素，再逐个判断是否包含搜索关键词。推荐使用 querySelectorAll("h1, h3, p") 获取全部匹配节点，结合扩展运算符 [...nodeList] 转为数组，再用 Array.prototype.some() 进行存在性校验——只要任一标签内容包含关键词，即视为该卡片“匹配”，应保持可见。
以下是优化后的完整函数：
function searchLp() {
const input = document.getElementById('search-lp').value.trim().toLowerCase();
const cards = document.querySelectorAll('.bigger');
// 若搜索框为空，显示全部卡片
if (!input) {
cards.forEach(card => card.classList.remove('hidden'));
return;
}
cards.forEach(card => {
// 获取当前卡片内所有 h1/h3/p 元素
const textElements = [...card.querySelectorAll('h1, h3, p')];
// 检查是否存在至少一个元素的内容包含搜索词
const matches = textElements.some(el =>
el.textContent?.trim().toLowerCase().includes(input)
);
if (matches) {
card.classList.remove('hidden');
} else {
card.classList.add('hidden');
}
});
}✅ 关键改进点说明：
- 使用 textContent 替代 innerHTML：避免误匹配 HTML 标签字符串（如 Baldur 中的 ），提升准确性与安全性；
- 添加 .trim()：清除前后空格，防止因空白字符导致匹配失败；
- 增加空值防护 el.textContent?.trim()：兼容无文本节点或空标签场景，避免 Cannot read property 'trim' of null 错误；
- 支持空搜索清空过滤：当用户清空输入框时，自动恢复所有卡片可见状态；
- 语义清晰、可维护性强：逻辑分层明确（获取输入 → 获取卡片 → 获取文本节点 → 判断匹配 → 更新样式）。
? 进阶提示：
如需支持更复杂的搜索逻辑（如分词匹配、高亮关键词、忽略标点），可进一步集成正则表达式或轻量级搜索库（如 Fuse.js）。但对于大多数内容卡片过滤场景，上述方案已足够高效、健壮且易于理解。
