脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript验证url

JavaScript验证一个url的方法总结

 更新时间：2023年12月06日 11:06:43   作者：fairyly  
最近遇到几次需要校验URL的,使用这篇文章小编就为大家整理了一下几个JavaScript校验URL的方法,文中的示例代码简洁易懂,感兴趣的小伙伴可以了解一下

1.使用 URL 构造函数来验证 URL

当传递一个字符串给 URL 构造函数时，如果字符串是一个有效的 URL，将返回一个新的 URL 对象。否则，将返回一个错误。

const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

在控制台得到的 URL 对象：

当传递一个无效的 URL 字符串：

const exampleUrl = new URL('example');
console.log(exampleUrl);

字符串 'example' 不是一个有效的 URL。因此，会报错 TypeError：

1.1 使用 URL 构造函数创建一个 URL 验证器函数

使用 URL 构造函数和 try...catch 语句，创建一个函数：

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

如果参数是一个有效的 URL 时，isValidUrl 函数返回 true。否则，返回 false：

console.log(isValidUrl('https://www.example.com/')); // true
console.log(isValidUrl('mailto://mail@example.com')); // true
console.log(isValidUrl('freecodecamp')); // false

浏览器兼容性：

大部分浏览器都支持的

1.2 使用 URL 构造器只验证 HTTP URL

要检查url是否是一个有效的 HTTP URL，不要其他有效的 URL，如 'mailto://mail@example.com'。

要检查url是否是一个有效的 HTTP URL，可以使用 URL 对象的 protocol 属性：

function isValidHttpUrl(string) {
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidUrl('https://www.example.com/')); // true
console.log(isValidUrl('mailto://mail@example.com')); // false
console.log(isValidUrl('freecodecamp')); // false

2.使用 npm 包来验证 URL

NPM 包：is-url 和 is-url-http

2.1 使用 is-url 包验证 URL

使用 is-url 包来检查一个字符串是否是一个有效的 URL。这个包并不检查传递给它的 URL 的协议。

安装：

npm install is-url --save

使用：

import isUrl from 'is-url';
const firstCheck = isUrl('https://kikobeats.com'); // true
const secondCheck = isUrl('mailto://kiko@beats.com'); // true
const thirdCheck = isUrl('example'); // false

2.2 使用 is-url-http 包来验证 HTTP URL

安装：

npm install is-url-http --save

使用：

import isUrlHttp from 'is-url-http';


isUrlHttp('https://kikobeats.com') // ==> true
isUrlHttp('https://kikobeats.com') // ==> true
isUrlHttp('mailto://kiko@beats.com') // ==> false
isUrlHttp('callto:192.168.103.77+type=ip') // ==> false

3.使用 Regex 来验证 URL

使用正则表达式来检查一个url是否是有效的 URL

所有有效的 URL 都遵循一个特定的模式。它们有三个主要部分，分别是：

协议
域名（或 IP 地址）
端口和路径
有时路径后面是一个查询字符串或片段定位符。

3.1 使用正则验证 URL

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://www.kikobeats.com/')); // true
console.log(isValidUrl('mailto://kikobeats.com')); // true
console.log(isValidUrl('example')); // false

3.2 使用正则验证 HTTP URL

要使用正则来检查一个url是否是有效的 HTTP URL，需要使用协议检查。

使用 '^(https?:\/\/)?'，而不是 ^([a-zA-Z]+:\/\/)?：

function isValidHttpUrl(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://www.kikobeats.com/')); // true
console.log(isValidUrl('mailto://kikobeats.com')); // false
console.log(isValidUrl('example')); // false

到此这篇关于JavaScript验证一个url的方法总结的文章就介绍到这了,更多相关JavaScript验证url内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript函数参数的传递方式详解

    JavaScript函数参数的传递方式详解

    本文主要介绍了JavaScript函数参数的传递方式，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Javascript实现苹果悬浮虚拟按钮

    Javascript实现苹果悬浮虚拟按钮

    本文给大家分享的是使用javascript实现仿制苹果的悬浮虚拟按钮的代码，非常的简单，给大家一个思路，大家可以根据自己的情况自由扩展。
    2016-04-04
  • 浅谈Javascript中substr和substring的区别

    浅谈Javascript中substr和substring的区别

    这篇文章主要介绍了Javascript中substr和substring的区别，非常的简单明了，有需要的小伙伴可以来仔细看看。
    2015-09-09
  • 微信小程序开发之左右分栏效果的实例代码

    微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子，简述在微信小程序开发中左右分栏功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • 让mocha支持ES6模块的方法实现

    让mocha支持ES6模块的方法实现

    这篇文章主要介绍了让mocha支持ES6模块的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 微信小程序实现日期范围选择

    微信小程序实现日期范围选择

    这篇文章主要为大家详细介绍了微信小程序实现日期范围选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javaScript中push函数用法实例分析

    javaScript中push函数用法实例分析

    这篇文章主要介绍了javaScript中push函数用法,较为详细的分析了javascript中push函数的功能、定义及使用技巧,需要的朋友可以参考下
    2015-06-06
  • Ajax请求时无法重定向的问题解决代码详解

    Ajax请求时无法重定向的问题解决代码详解

    这篇文章主要介绍了Ajax请求时无法重定向的问题解决代码详解，当使用Ajax请求时，如果后台进行重定向到其他页面时是无法成功的，只能在浏览器地址栏输入才能够实现重定向。下面我们来看看解决方法吧
    2019-06-06
  • js从外部获取图片的实现方法

    js从外部获取图片的实现方法

    下面小编就为大家带来一篇js从外部获取图片的实现方法。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ES6知识点整理之Proxy的应用实例详解

    ES6知识点整理之Proxy的应用实例详解

    这篇文章主要介绍了ES6知识点整理之Proxy的应用,结合实例形式详细分析了ES6中Proxy的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-04-04

最新评论