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'));
输出：
该演示清楚地解释了即使最后一个 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'));
输出：
isValidURL 函数获取字符串，一旦将其传递给 a.href，它就会获得协议。
如果它不遵循 URL 模式，它不关心在字符串上工作，并且这种情况将认为字符串失败并将其返回为 false。
在 JavaScript 中使用正则表达式匹配 URL 模式并验证 URL
正则表达式的 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。
但是，如果我们以不同的方式生成正则表达式，我们的第三种情况会很令人满意，其中协议部分是可选的。
