JS获取两分隔符间HTML无显示，PHP可行求解决方法

尝试通过JavaScript获取两个HTML注释分隔符（<!------Tools---------->和<!-----Hobbies---->）之间的HTML内容，但页面无任何显示，相关JS代码如下：

fetch('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Cool_Stuff.html')
  .then(response => response.text())
  .then(data => {
    const start = data.indexOf('Tools');
    const end = data.indexOf('Hobbies');
    const result = data.substring(start, end); document.getElementById('output').innerHTML = result;
  })

使用PHP实现相同功能的代码如下：

<?php
$url = 'https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Cool_Stuff.html';
$html = file_get_contents($url);
$start = strpos($html, '<!------Tools---------->');
$end = strpos($html, '<!-----Hobbies---->', $start);
$length = $end - $start;
$result = substr($html, $start, $length);
echo $result;
?>

请问如何让JavaScript正常实现该功能？

你的JS代码存在几个关键问题，修正后即可正常运行：

1. 对齐分隔符匹配规则 #

PHP中使用完整的HTML注释作为分隔符，但JS仅匹配Tools和Hobbies字符串，这会导致定位错误。必须和PHP保持一致，使用完整的注释文本作为匹配目标。

2. 完善请求与异常处理 #

fetch请求可能因跨域、网络问题失败，需要校验响应状态；同时要处理分隔符找不到的情况，避免页面无输出。

3. 完整修复代码 #

fetch('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Cool_Stuff.html')
  .then(response => {
    // 校验请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response.text();
  })
  .then(data => {
    const startDelimiter = '<!------Tools---------->';
    const endDelimiter = '<!-----Hobbies---->';
    
    // 从起始分隔符后开始查找结束分隔符，避免匹配到无关内容
    const start = data.indexOf(startDelimiter);
    const end = data.indexOf(endDelimiter, start + startDelimiter.length);
    
    // 检查分隔符是否存在
    if (start === -1 || end === -1) {
      document.getElementById('output').innerHTML = '未找到目标内容';
      return;
    }
    
    // 跳过分隔符本身，只截取中间的HTML内容
    const result = data.substring(start + startDelimiter.length, end);
    document.getElementById('output').innerHTML = result;
  })
  .catch(error => {
    // 处理请求错误，比如跨域限制
    document.getElementById('output').innerHTML = `出错了：${error.message}`;
  });

额外说明 #

• 如果运行JS的页面域名和目标URL域名不同，可能触发CORS跨域限制，此时需要目标服务器配置CORS允许你的域名访问，或通过代理服务器中转请求。
• 使用indexOf(endDelimiter, start + startDelimiter.length)可以确保只在起始分隔符之后查找结束分隔符，避免定位错误。

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