如何在 JavaScript 中验证 URL

原文： How to Validate URLs in JavaScript

统一资源定位符 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);

以下是你在控制台记录 fccUrl 时得到的信息：

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

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

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

字符串 'freecodecamp' 不是一个有效的 URL。因此，你将得到错误 TypeError：

A TypeError after passing an invalid URL to the URL constructor — 无效的 URL

回顾一下：

当你把一个有效的 URL 字符串传递给 URL 构造函数时，它返回一个新的 URL 对象。
当你向 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://mail@freecodecamp.org')); // true
console.log(isValidUrl('freecodecamp')); // false

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

有时，你可能想检查这个字符串是否是一个有效的 HTTP URL，而拒绝其他有效的 URL，如 'mailto://mail@freecodecamp.org'。

如果你仔细看一下 URL 对象，它的一个属性是 protocol：

在上面的例子中，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://mail@freecodecamp.org')); // 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://mail@freecodecamp.org');
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://freecodecamp@mail.org');
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

你可以选择自己喜欢的工作方法。

谢谢你阅读本文，happy coding！