首页 > 编程语言 >如何在 JavaScript 中验证 URL

如何在 JavaScript 中验证 URL

时间：2024-02-03 16:15:44浏览次数：28  
标签：console log 验证 URL JavaScript freecodecamp 字符串 true

如何在 JavaScript 中验证 URL

统一资源定位符 URL（Uniform Resource Locator）引导你进入互联网上的一个页面或文件。URL 是互联网上事物的地址。

所有有效的 URL 都遵循某些模式。因此，如果你知道这些模式，你就可以在你的程序中确定一个 URL 是否有效，并给出反馈、抛出一个错误，等等。

在本教程中，你将学习三种方法来检查 JavaScript 中的一个字符串是否是有效的 URL。

  • 如何使用 URL 构造器来验证 URL
  • 如何使用 npm 包来验证 URL
  • 如何使用 Regex 来验证 URL

如何使用 URL 构造函数来验证 URL

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

const fccUrl = new URL("https://www.freecodecamp.org/");
console.log(fccUrl);

这个对象意味着你传递给 URL 构造函数的字符串是一个有效的 URL。

现在让我们看看当你传递一个无效的 URL 字符串时，你会得到什么：

const fccUrl = new URL('freecodecamp');
console.log(fccUrl);

字符串 'freecodecamp' 不是一个有效的 URL。

回顾一下：

  1. 当你把一个有效的 URL 字符串传递给 URL 构造函数时，它返回一个新的 URL 对象。
  2. 当你向 URL 构造函数传递一个无效的 URL 字符串时，它会返回一个 TypeError。

有了这些知识，你可以创建一个自定义函数来检查一个给定的 URL 字符串的有效性。

如何用 URL 构造函数创建一个 URL 验证器函数

通过使用 URL 构造函数和 try...catch 语句，你可以创建一个自定义 isValidUrl 函数：

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

当你作为参数传递的字符串是一个有效的 URL 时，isValidUrl 函数返回 true。否则，它返回 false：

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://[email protected]')); // true
console.log(isValidUrl('freecodecamp')); // false

如何用 URL 构造器只验证 HTTP URL

有时，你可能想检查这个字符串是否是一个有效的 HTTP URL，而拒绝其他有效的 URL，如 'mailto://[email protected]'。

在上面的例子中，protocol 属性的值是 'https:'。

要检查一个字符串是否是一个有效的 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(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://[email protected]')); // false
console.log(isValidHttpUrl('freecodecamp')); // false

这里的区别是，在新的 URL 对象被创建后，你没有返回 true。相反，你要检查 protocol 属性的值是否等于 "http: " 或 "https:"，如果是则返回 true，如果不是则返回 false。

如何使用 npm 包来验证 URL

有两个 NPM 包供你使用：is-url 和 is-url-http。

这些包是检查一个字符串是否为有效 URL 的最简单方法。你所需要做的就是传入一个字符串作为参数，而它们将返回 true 或 false。

让我们看看这两个包是如何工作的：

如何用 is-url 包验证 URL

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

要使用 is-url，首先使用下面的命令安装它：

npm install is-url

然后导入它，并将你的 URL 字符串作为一个参数传给它：

import isUrl from 'is-url';

const firstCheck = isUrl('https://www.freecodecamp.org/');
const secondCheck = isUrl('mailto://[email protected]');
const thirdCheck = isUrl('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // true
console.log(thirdCheck); // false

is-url 包对具有有效 URL 格式的字符串返回 true，对具有无效 URL 格式的字符串返回 false。

在这个例子中，firstCheck（使用 https: 协议）和 secondCheck（使用 mailto: 协议）都返回 true。

如何用 is-http-url 包来验证 HTTP URL

你可以使用 is-url-http 包来检查一个字符串是否是一个有效的 HTTP URL。

用下面的命令安装这个包：

npm install is-url-http

然后导入它，像这样把 URL 字符串传给它：

import isUrlHttp from 'is-url-http';

const firstCheck = isUrlHttp('https://www.freecodecamp.org/');
const secondCheck = isUrlHttp('mailto://[email protected]');
const thirdCheck = isUrlHttp('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // false
console.log(thirdCheck); // false

在这个例子中，只有 firstCheck 返回 true。is-url-http 包不仅检查字符串是否是一个有效的 URL，它还检查它是否是一个有效的 HTTP URL。这就是为什么它对 secondCheck 返回 false，因为它不是一个有效的 HTTP URL。

如何使用 Regex 来验证 URL

你也可以使用正则表达式来检查一个字符串是否是有效的 URL。

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

  • 协议
  • 域名（或 IP 地址）
  • 端口和路径

有时路径后面是一个查询字符串或片段定位符。

你可以从这篇关于 URL 模式的 freeCodeCamp 文章中了解更多关于 URL 模式的信息。

知道了 URL 的模式，你可以使用正则来检查字符串中是否存在这样的模式。如果这些模式存在，那么这个字符串就通过了正则测试。否则，它就会失败。

另外，使用正则，你可以检查所有有效的 URL，或者只检查有效的 HTTP URL。

如何用正则验证 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.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://freecodecamp.org')); // true
console.log(isValidUrl('freeCodeCamp')); // false

上面 isValidUrl 函数中的正则检查一个字符串是否是一个有效的 URL。协议检查 ^([a-zA-Z]+:\\/\\/)? 不仅仅限于 https:。

这就是为什么第二个例子中的 mailto: 协议会返回 true。

如何用正则验证 HTTP 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(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://freecodecamp.org')); // false
console.log(isValidHttpUrl('freeCodeCamp')); // false

现在只有第一个具有有效的 https: 协议的例子返回 true。请注意，带有 http: 的 URL 字符串也可以工作。

总结

在这篇文章中，你学到了如何在 JavaScript 中检查 URL 的有效性。现在，你知道了以下三种方法，可以做到这一点。

  • 如何使用 URL 构造器来验证 URL 的有效性
  • 如何使用 npm 包来验证 URL（is-url 和 is-http-url）
  • 如何使用正则来验证 URL

标签：console,log,验证,URL,JavaScript,freecodecamp,字符串,true
From： https://www.cnblogs.com/nuomibaibai/p/18004857

相关文章

  • file_get_contents 避免出现按个 ssl -60 的报错 ，不进行数据验证 或者 使用php.ini 进
    1，使用不去验证数据$stream_opts=["ssl"=>["verify_peer"=>false,"verify_peer_name"=>false,]];$user_info=json_decode(file_get_contents($user_info_url,false,stream_context_create($stream_opts)));2,配置php.ini......
  • [学习笔记] JavaScript中字符串的Slice()方法
    slice方法是对字符串进行切割/截取的一种方法。string.slice(index1,index2)其中：string为字符串名；index1为数字，意为字符串从第X个字符开始截取，如为1，则从字符串第1个字符开始截取。同时该数可为负数，当设为负数时则是从倒数第X个字符开始截取（但仍旧是向最后一个字符的方......
  • Java和JavaScript区别与联系
    JavaScript和java属于两门语言。参考了java语言，“看上去与Java足够相似，但是比Java简单”，是简化版Java语言。特别是在定义对象变量的时候，省略的太极端了。java里有的很多常用类型的对象在js中是没有的。JavaScript由原网景（Netscape）公司的高级工程师布兰登·艾奇（BrendanEich）（曾经的M......
  • 探索五款全球知名的JavaScript混淆加密工具
    ​现在市场上有很多好用的JavaScript混淆加密工具，其中一些比较流行且受欢迎的工具包括：1、UglifyJS（罗马尼亚）：UglifyJS是一个非常流行的JavaScript工具库，它可以压缩、混淆、美化和格式化JavaScript代码。使用UglifyJS时，您可以通过调整参数来控制压缩级别并设置混淆选项。网站......
  • BigInt：JavaScript 中的任意精度整数
    BigInts 是JavaScript中的一个新的数字基本(primitive)类型，可以用任意精度表示整数。使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。umber 在JavaScript中被表示为双精度浮点数。这意味着它们的精度有限。......
  • npm disturl 是做什么用的?
    npmdisturl是做什么用的?npmdisturl是一个配置项，用于设置npm下载tarball包（通常是Node.js的二进制文件或者一些带有平台相关编译内容的npm模块）时的基础URL。当npm需要从源代码构建依赖项，并且这些依赖项包含需要从特定位置下载的预编译二进制文件时，它会使用这个disturl来定位和......
  • 基于FPGA的图像RGB转CMYK实现,包含testbench和MATLAB辅助验证程序
    1.算法运行效果图预览 将仿真结果导入到matlab中，得到如下对比结果： 2.算法运行软件版本matlab2022a，vivado2019.2 3.算法理论概述       基于FPGA的图像RGB转CMYK实现是一种将RGB图像转换为CMYK图像的硬件实现方法。下面将详细介绍其原理和数学公式。 3.1、......
  • Java调用ChatGPT（基于SpringBoot和Vue）实现连续对话、流式输出和自定义baseUrl
     源码及更详细的介绍说明参见Git上的README.md文档https://github.com/asleepyfish/chatgpt本文Demo(SpringBoot和Main方法Demo均包括)的Git地址：https://github.com/asleepyfish/chatgpt-demo流式输出结合Vue前端的Demo的Git地址：https://github.com/asleepyfish/chatg......
  • FFmpeg和Monibuka拉取rtsp(大华摄像头)视频流时未进行URLCode编码导致提示404等报错
    场景Monibucav4(开源流媒体服务器)在Windows上搭建rtmp服务器并实现拉取rtsp视频流以及转换flv播放：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/132474126Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/articl......
  • 什么是JavaScript表达式语句？
    JavaScript语法(三)：什么是表达式语句？不知道你有没有注意到，我们在语句部分，讲到了很多种语句类型，但是，其实最终产生执行效果的语句不多。事实上，真正能干活的就只有表达式语句，其它语句的作用都是产生各种结构，来控制表达式语句执行，或者改变表达式语句的意义。今天的课程，我们就深入到......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99