本文详解如何使用 JavaScript 的 fetch API 异步获取网页 HTML 内容，并判断目标字符串是否存在于响应体中，同时修复初学者常见的 Promise 未等待、no-cors 限制及类型错误问题。
本文详解如何使用 javascript 的 `fetch` api 异步获取网页 html 内容，并判断目标字符串是否存在于响应体中，同时修复初学者常见的 promise 未等待、`no-cors` 限制及类型错误问题。
在前端开发中，常需验证某段文本是否出现在远程网页中（例如自动化测试、内容监控等）。但直接调用 fetch().text 会返回一个 Promise，而非字符串——这正是原代码报错 Cannot read properties of undefined (reading 'includes') 的根本原因：page.text 是函数引用，未执行；而 body 被赋值为该函数本身，后续调用 .includes() 时因 body 非字符串类型而失败。
✅ 正确做法：使用 async/await 等待异步操作完成
const checkForText = async (url, text) => {
try {
// 注意：mode: 'no-cors' 仅允许简单请求，且响应体受限（多数情况下无法读取）
const response = await fetch(url, { mode: 'cors' }); // 推荐优先使用 cors 模式
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const body = await response.text(); // ✅ 正确：调用 .text() 方法并 await 其 Promise
if (body.includes(text)) {
console.log(`Passed. "${text}" found on ${url}`);
return true;
} else {
console.error(`Failed. Did not find "${text}" on ${url}!`);
return false;
}
} catch (error) {
console.error('Fetch failed:', error.message);
return false;
}
};
// 调用示例（需在支持 top-level await 的环境，如模块脚本或 async 函数内）
await checkForText('https://dsbelmex.biz/nosotros/', 'equilibrio');
⚠️ 关键注意事项
- mode: 'no-cors' 的局限性：启用后浏览器会屏蔽响应体访问（response.text() 将抛出 TypeError），仅适用于无需读取内容的“预检”场景。真实检测必须使用 mode: 'cors'，且目标服务器需配置 Access-Control-Allow-Origin 响应头。
- 跨域限制无法绕过：若目标网站未开启 CORS，前端直接 fetch 将失败。此时应通过服务端代理（如 Express 中转请求）规避限制。
- 大小写与全字匹配：includes() 区分大小写。如需忽略大小写，可改用 body.toLowerCase().includes(text.toLowerCase())；如需单词边界匹配，建议结合正则表达式 new RegExp(\b${text}\b, 'i').test(body)。
- HTML 结构干扰：直接搜索原始 HTML 可能匹配到 <script> 或注释中的文本。如需精准匹配可见文本，应先解析 DOM（如使用 DOMParser），再提取 textContent。</script>
✅ 总结
检测网页文本的核心在于：
① 正确使用 await fetch(...).then(res => res.text()) 获取响应字符串；
② 优先采用 mode: 'cors' 并确保服务端支持；
③ 始终包裹 try/catch 处理网络异常；
④ 根据实际需求调整匹配逻辑（大小写、上下文、可见性）。
掌握这些要点，即可稳健实现网页内容存在性校验。
