如何实现搜索栏仅检索关键词文本，排除HTML链接标签内容？

安全阿岳

2026-6-1

解决搜索栏误匹配HTML标签内容的问题

你的核心问题在于将完整HTML链接字符串直接存入数组，导致搜索时会匹配到标签里的href、fruits等无关内容。要实现仅匹配水果名称的需求，需重构数据结构，分离搜索目标与显示用链接。

步骤1：重构数据结构

把原有的HTML字符串数组改成包含水果名和对应链接的对象数组，让搜索逻辑可以单独针对水果名生效：

let availableKeywords = [
  { name: 'Apples', url: '/fruits/apples.html' },
  { name: 'Bananas', url: '/fruits/bananas.html' },
  { name: 'Oranges', url: '/fruits/oranges.html' },
  { name: 'Strawberries', url: '/fruits/strawberries.html' }
];

步骤2：修改搜索匹配逻辑

在filter阶段仅针对对象的name字段做匹配，彻底避开HTML标签内容：

const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");

inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value.trim();
    if(input.length){
        result = availableKeywords.filter((item)=>{
            return item.name.toLowerCase().includes(input.toLowerCase());
        });
    }
    display(result);
}

步骤3：调整结果展示函数

根据对象中的name和url生成正确的HTML链接，保证显示效果与需求一致：

function display(result){
    if(!result.length){
        resultsBox.innerHTML = '';
        return;
    }
    const content = result.map((item)=>{
        return `<li><a href="${item.url}">${item.name}</a></li>`;
    });
    resultsBox.innerHTML = `<ul>${content.join('')}</ul>`;
}