JavaScript 验证 URL

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 使用 JavaScript URL 构造函数验证 URL
  2. 在 JavaScript 中使用锚标记将字符串验证为 URL
  3. 在 JavaScript 中使用正则表达式匹配 URL 模式并验证 URL
JavaScript 验证 URL

在 JavaScript 中,你可以使用数字约定来验证 URL。如果我们剖析一个 URL,我们会得到一个协议、主机名、域名、单个或多个阶段的路径。

我们将使用 JavaScript URL 构造函数来获取给定的字符串。之后,我们将把我们的字符串传递给一个锚标签,看看这个方法是如何反应的。

匹配字符串和 URL 的最常见方法是执行正则表达式 test()

使用 JavaScript URL 构造函数验证 URL

JavaScript URL 构造函数及其接受字符串的方式侧重于基本的 URL 模式——协议、主机名、域名等。

我们将为以下示例启动一个 try-catch 范围,并让 try 范围检查字符串是否遵循基本 URL 模式。否则,我们将认为字符串失败并继续进行。

代码片段:

function isValidHttpUrl(string) {
  var url;
  try {
    url = new URL(string);
  }
  catch (err) {
    return false;
  }
  return url.protocol === "http:" || url.protocol === "https:";
}
console.log(isValidHttpUrl('file:///Y:/bleh/index.html'));
console.log(isValidHttpUrl('https://www.youtube.com/watch?v=iFP-EWO_Q_o'));
console.log(isValidHttpUrl('en.wikipedia.org'));

输出:

使用 JavaScript URL 构造函数验证 URL

该演示清楚地解释了即使最后一个 URL 在浏览器中显示为 wikipedia.org,我们的函数 isValidHttpUrl 将显示 false。它没有先前的协议,并且这样的模式不被视为 URL。

在 JavaScript 中使用锚标记将字符串验证为 URL

一个锚标记后跟一个 href (header reference)。每当我们创建这样一个元素并尝试操作 DOM 时,我们都会将字符串设置为 a.href

因此,将附加一个缺少协议的 hostname。让我们检查实例以获得清晰的视图。

代码片段:

function isValidURL(str) {
   var a  = document.createElement('a');
   a.href = str;
   return a.protocol === "http:" || a.protocol === "https:";
}
console.log(isValidURL('file:///Y:/bleh/index.html'));
console.log(isValidURL('https://www.youtube.com/watch?v=iFP-EWO_Q_o'));
console.log(isValidURL('en.wikipedia.org'));

输出:

使用锚标记将字符串验证为 URL

isValidURL 函数获取字符串,一旦将其传递给 a.href,它就会获得协议。

如果它不遵循 URL 模式,它不关心在字符串上工作,并且这种情况将认为字符串失败并将其返回为 false

在 JavaScript 中使用正则表达式匹配 URL 模式并验证 URL

正则表达式的 test() 方法匹配布尔形式的输出。当我们生成一个正则表达式来检查字符串是否是 URL 时,它只会导致 truefalse

代码片段:

function isValidUrl(string) {
  const pattern = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
  return pattern.test(string);
}
console.log(isValidUrl('file:///Y:/bleh/index.html'));
console.log(isValidUrl('https://www.youtube.com/watch?v=iFP-EWO_Q_o'));
console.log(isValidUrl('en.wikipedia.org'));

输出:

使用正则表达式匹配 URL 模式并验证 URL

这里的实例有一个特定的正则表达式模式,据此,明确提到了协议。这就是为什么我们的第三个字符串 en.wikipedia.org 将结果显示为 false

但是,如果我们以不同的方式生成正则表达式,我们的第三种情况会很令人满意,其中协议部分是可选的。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript String