如何使用JavaScript搜索外部链接对应的HTML文件内容

你的需求完全可以仅通过HTML、CSS、JavaScript实现，不需要额外引入框架或工具包，整体实现难度很低，新手也能快速完成。

1. 外部HTML文件读取方案 #

• 不需要额外安装第三方包，直接用浏览器原生的fetch() API就可以完成请求，代码写法非常简洁。
• 注意事项：受浏览器同源策略限制，你要请求的4个外部链接的服务端需要配置CORS跨域允许，否则会请求失败。本地调试时直接用VS Code的Live Server插件启动本地服务测试即可。
• 参考代码示例：

// 预定义要请求的4个HTML链接
const htmlUrls = [
  '你的第1个HTML链接',
  '你的第2个HTML链接',
  '你的第3个HTML链接',
  '你的第4个HTML链接'
]
// 批量拉取所有HTML内容
async function fetchAllHtml() {
  const htmlContents = []
  for (const url of htmlUrls) {
    const res = await fetch(url)
    const content = await res.text()
    htmlContents.push({ url, content })
  }
  return htmlContents
}

2. 姓名列表输入实现 #

直接在HTML里加文本域组件即可，支持用户批量输入姓名，约定用换行、逗号或者空格分隔即可，JS拿到输入值后直接拆分就能得到姓名数组，参考代码：

<textarea id="nameInput" placeholder="请输入姓名，一行一个"></textarea>
<button id="searchBtn">开始搜索</button>
<div id="resultBox"></div>

3. 搜索匹配与结果输出实现 #

拿到拉取到的所有HTML内容和拆分后的姓名数组后，双层遍历匹配即可，用字符串的includes()方法就能完成匹配判断，需要大小写不敏感的话可以统一转成小写再判断，参考逻辑：

const searchBtn = document.getElementById('searchBtn')
const resultBox = document.getElementById('resultBox')

searchBtn.addEventListener('click', async () => {
  // 拉取所有HTML内容
  const htmlContents = await fetchAllHtml()
  // 拆分用户输入的姓名列表
  const names = document.getElementById('nameInput').value.trim().split('\n').filter(name => name.trim())
  let resultHtml = ''
  // 遍历每个姓名搜索
  for (const name of names) {
    const matchFiles = []
    // 遍历所有HTML文件匹配
    for (const html of htmlContents) {
      if (html.content.toLowerCase().includes(name.toLowerCase())) {
        matchFiles.push(html.url)
      }
    }
    // 拼接结果
    if (matchFiles.length) {
      resultHtml += `<p>「${name}」：match，匹配到的文件：${matchFiles.join('、')}</p>`
    } else {
      resultHtml += `<p>「${name}」：no match</p>`
    }
  }
  // 输出到页面
  resultBox.innerHTML = resultHtml
})

复杂度说明 #

整体核心代码不到100行，没有复杂逻辑，完全基于原生JS API实现，不需要额外学习第三方工具的用法，对新手非常友好。

内容的提问来源于stack exchange，提问作者Ali