JavaScipt验证URL新方法(2023 年版)

JavaScript诞生以来,一直没有一种简单的方法验证URL,现在JavaScript新增了一个新方法------URL.canParse

jsx 复制代码
URL.canParse('https://www.stefanjudis.com'); // true 
URL.canParse('www.stefanjudis.com'); // false

URL.canParse() 是一种快速验证字符串是否为有效的URL的方法。然而我们也不要高兴太早,URL.canParse()方法还存在浏览器兼容问题,在写这篇文章时支持该方法的浏览器版本如下图:

这是详情的浏览器支持信息链接:caniuse.com/?search=can...

不过core-js已支持URL.canParse()方法,使用core-js作为垫片可以解决浏览器兼容性问题。

URL.canParse()URL() 构造函数是相同的算法来评估有效的 URL。

由于这两种方法都实现了相同的解析器,并且URL() 目前得到了很好的支持,因此我们可以使用构造函数来验证 URL。将新的URL() 放在辅助函数中,调用它并检查它是否抛出异常!

jsx 复制代码
function isUrlValid(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

isUrlValid('https://www.stefanjudis.com'); // true
isUrlValid('www.stefanjudis.com'); // false

如果不喜欢 isUrlValid 函数,也可以像 core-js 一样 polyfill URL.canParse()

关注公粽号【程序员凌览】回复"666",拉您进【人类高质量前端交流群~】

往期推荐:linglan01.cn/about

相关推荐
mwq3012315 分钟前
不再混淆:导数 (Derivative) 与微分 (Differential) 的本质对决
前端
小二·1 小时前
Vue 3 组件通信全方案详解:Props/Emit、provide/inject、事件总线替代与组合式函数封装
前端·javascript·vue.js
研☆香1 小时前
html框架页面介绍及制作
前端·html
be or not to be2 小时前
CSS 定位机制与图标字体
前端·css
DevUI团队2 小时前
🔥Angular高效开发秘籍:掌握这些新特性,项目交付速度翻倍
前端·typescript·angular.js
Moment2 小时前
如何在前端编辑器中实现像 Ctrl + Z 一样的撤销和重做
前端·javascript·面试
宠..2 小时前
优化文件结构
java·服务器·开发语言·前端·c++·qt
Tencent_TCB2 小时前
AI Coding全流程教程——0基础搭建“MEMO”健康打卡全栈Web应用(附提示词)
前端·人工智能·ai·ai编程·codebuddy·claude code·cloudbase
小猪猪屁2 小时前
权限封装不是写个指令那么简单:一次真实项目的反思
前端·javascript·vue.js
hteng2 小时前
跨域 Iframe 嵌套:调整内部 Iframe 高度的终极指南 (以及无解的真相)
前端