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

相关推荐
Vincent_Vang21 小时前
多态 、抽象类、抽象类和具体类的区别、抽象方法和具体方法的区别 以及 重载和重写的相同和不同之处
java·开发语言·前端·ide
菩提小狗21 小时前
小迪安全_第4天:基础入门-30余种加密编码进制&Web&数据库&系统&代码&参数值|小迪安全笔记|网络安全|
前端·网络·数据库·笔记·安全·web安全
闲蛋小超人笑嘻嘻21 小时前
非父子通信: provide和inject
前端·javascript·vue.js
周亚鑫21 小时前
vue3 js代码混淆
开发语言·javascript·ecmascript
止观止1 天前
不止解构:深入掌握 ES6+ 对象与函数的高级语法糖
前端·javascript·es6
C_心欲无痕1 天前
react - useTransition标记低优先级更新
前端·react.js·前端框架
捻tua馔...1 天前
antd3的表单实现(HOC解决方案)
前端·javascript·react.js
支付宝体验科技1 天前
支付宝 KJS Compose 动态化方案与架构设计
前端·客户端
AllinLin1 天前
JS中的call apply bind全面解析
前端·javascript·vue.js
阿乐去买菜1 天前
2025 年末 TypeScript 趋势洞察:AI Agent 与 TS 7.0 的原生化革命
前端