迹忆客 专注技术分享

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

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

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

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'));

输出：

该演示清楚地解释了即使最后一个 URL 在浏览器中显示为 wikipedia.org，我们的函数 isValidHttpUrl 将显示 false。它没有先前的协议，并且这样的模式不被视为 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'));

输出：

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

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

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

代码片段：

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'));

输出：

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

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