JS网页注释提取代码失效求助及最佳实践建议

代码中的核心问题 #

1. 跨域请求限制（CORS）
   浏览器同源策略禁止前端脚本直接请求外部域名资源，你的fetch调用会被浏览器拦截，返回CORS错误。

2. 正则表达式错误

• 用\/\/g匹配HTML注释完全错误，HTML注释格式是<!-- 内容 -->，正确正则应为/<!--[\s\S]*?-->/g。
• 直接用/\/\/(.*?)\n/g匹配单行注释会误判HTML中包含//的内容（如CDN链接），需先提取<script>标签内的代码再处理JS注释。

3. DOM元素查找错误
   document.querySelectorAll(".comment-class p")是在当前页面DOM中查找元素，而非请求回来的目标页面HTML，需先把请求到的HTML解析为DOM对象再查询。

4. 函数未返回Promise
   extractComments函数没有返回fetch的Promise链，导致后续.then()调用报错——函数默认返回undefined，无法触发链式调用。

修正后的代码 #

由于前端直接跨域请求受限，给出两种可行方案：

方案1：本地代理调试（前端开发用） #

通过本地代理转发请求绕过CORS，再处理注释提取：

function extractComments(url) {
  // 假设本地代理地址为/api/proxy，需自行配置（如Node.js的http-proxy-middleware）
  return fetch(`/api/proxy?url=${encodeURIComponent(url)}`)
    .then(response => {
      if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
      return response.text();
    })
    .then(htmlContent => {
      const comments = [];
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlContent, 'text/html');

      // 提取HTML注释
      const htmlComments = htmlContent.match(/<!--[\s\S]*?-->/g) || [];
      comments.push(...htmlComments.map(comment => comment.slice(4, -3).trim()));

      // 提取<script>标签内的JS注释
      const scriptTags = doc.querySelectorAll('script');
      scriptTags.forEach(script => {
        const jsContent = script.textContent;
        // 单行注释
        const jsSingleComments = jsContent.match(/\/\/(.*?)\n/g) || [];
        comments.push(...jsSingleComments.map(comment => comment.slice(2, -1).trim()));
        // 多行注释
        const jsMultiComments = jsContent.match(/\/\*[\s\S]*?\*\//g) || [];
        comments.push(...jsMultiComments.map(comment => comment.slice(2, -2).trim()));
      });

      // 提取页面指定class的文本内容
      const elementComments = doc.querySelectorAll(".comment-class p");
      comments.push(...Array.from(elementComments).map(el => el.innerText.trim()));

      return comments;
    })
    .catch(error => {
      console.error("提取注释出错：", error);
      throw error;
    });
}

const websiteURL = "https://www.shopaholic.pk/storage-black-bag";
extractComments(websiteURL)
  .then(comments => {
    console.log("提取到的注释：");
    console.log(comments);
  })
  .catch(err => console.error("最终错误：", err));

方案2：后端处理（生产环境推荐） #

在后端（如Node.js）发起请求并提取注释，前端调用后端接口获取结果，彻底规避CORS问题。

最佳实践建议 #

• 跨域处理：前端避免直接请求外部域名，优先使用后端代理或目标网站允许的CORS配置。
• HTML解析：用DOMParser处理HTML内容，避免手动字符串匹配的局限性与误判。
• 正则精准性：提取代码注释时，先定位对应标签（如<script>）再处理，避免匹配HTML中的相似字符。
• 错误处理：Promise链中必须添加catch，抛出错误让调用方处理，避免静默失败。
• 合法性合规：确保有权限爬取目标网站内容，遵守网站robots.txt协议与使用条款。

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