ZBLOG

javaScript获取一个标签的url后如何判断是相对路径还是绝对路径,语言层有现成的方法吗

在 JavaScript 中,可以通过以下方法判断一个 URL 是相对路径还是绝对路径


1. 直接检查字符串特征

绝对路径通常以 http://https:////(协议相对)开头,而相对路径不以这些前缀开头。可以通过正则表达式或简单的字符串检查实现:

function isAbsoluteUrl(url) {
  return /^(https?:)?\/\//i.test(url) || url.startsWith('http://') || url.startsWith('https://');
}

// 测试用例
console.log(isAbsoluteUrl("https://example.com")); // true(绝对)
console.log(isAbsoluteUrl("//cdn.example.com"));   // true(协议相对)
console.log(isAbsoluteUrl("/images/logo.png"));    // false(相对)
console.log(isAbsoluteUrl("logo.png"));           // false(相对)

2. 使用浏览器内置的 URL API

通过 new URL() 构造函数解析 URL,结合当前页面的基础地址 (baseURL) 可以自动补全相对路径。如果解析后的 URL 与原输入不同,则说明输入是相对路径:

function isAbsoluteUrl(url, base = window.location.href) {
  try {
    new URL(url); // 如果能直接解析,说明是绝对路径
    return true;
  } catch (e) {
    try {
      new URL(url, base); // 尝试基于当前页面补全
      return false;       // 能补全则是相对路径
    } catch (e) {
      return false;       // 无效的 URL(如空字符串)
    }
  }
}

// 测试用例
console.log(isAbsoluteUrl("https://example.com")); // true
console.log(isAbsoluteUrl("/api/data"));          // false

3. Web API:URL.canParse() (较新特性)

现代浏览器支持 URL.canParse() 方法,可直接检测是否为有效绝对 URL:

function isAbsoluteUrl(url) {
  return URL.canParse(url); // true → 绝对路径;false →可能是相对或无效
}

总结

  • 推荐方法:优先使用 URL API(方法2),它是语言层原生支持的标准方案。
  • 注意事项
    • 如果输入是空字符串或非法格式,需要额外处理。
    • file://data:等特殊协议也属于绝对路径。

如果需要进一步处理路径(如拼接),可以使用 new URL(relativePath, base)


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=23704

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?