数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript 中验证 URL 地址？
在本教程中，我们将讨论如何在 JavaScript 中验证 URL 地址。
URL 或统一资源定位符用于标识互联网上的网页、图像和视频。URL 是网站地址，用于传输文件、发送电子邮件等等。
URL 由协议、域名等等组成。URL 指示浏览器如何获取数据以及从哪里获取数据。
我们在锚标记或按钮中使用 URL 将用户导航到另一个位置。在使用 URL 之前，我们必须验证其有效性。
URL 规则
URL 必须以 http:// 或 https:// 开头。
URL 可能包含也可能不包含 www。
URL 不能是磁力链接或种子链接。
现在，让我们看看验证 URL 地址的方法。
使用正则表达式
正则表达式描述了一种字符模式。我们使用这些模式来匹配某些文本。
用户可以按照以下语法使用此方法。
语法
string.match(regExp); var pattern = new RegExp(regExp); pattern.test(string);
第一种语法匹配正则表达式。第二种语法测试 URL 模式。
参数
string − string 是要验证的 URL。
regExp − 用于匹配 URL 的正则表达式。
pattern − 用于测试 URL 的正则表达式模式。
示例
此程序显示多个正则表达式和正则表达式模式匹配，以验证 URL。
<html> <body> <h2> Validating the URL using <i> regular expressions </i> </h2> <div id = "urlValBtnWrap"> <button id = "urlValBtn"> Click Me </button> </div> <p id="urlValOut"></p> <script> var urlValBtnWrap = document.getElementById("urlValBtnWrap"); var urlValBtn = document.getElementById("urlValBtn"); var urlValOut = document.getElementById("urlValOut"); var urlRegStr = ""; urlValBtn.onclick = function(){ urlValBtnWrap.style.display = "none"; var regEx1 = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm; var url1 = 'https://www.test.com'; urlRegStr += url1 + ' is ' urlRegStr += regEx1.test(url1) + "<br><br>"; var regEx2 = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/; var url2 = 'http://www.test.com'; urlRegStr += url2 + ' is ' urlRegStr += regEx2.test(url2) + "<br><br>"; var url3 = 'www.test.com'; urlRegStr += url3 + ' is ' urlRegStr += regEx2.test(url3) + "<br><br>"; var regEx3 = /^((https?):\/\/)?([w|W]{3}\.)+[a-zA-Z0-9\-\.]{3,}\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/; var url4 = 'httpe://www.test.com'; urlRegStr += url4 + ' is ' urlRegStr += regEx3.test(url4) + "<br><br>"; var regEx4 = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g; var url5 = 'test'; urlRegStr += url5 + ' is ' urlRegStr += regEx4.test(url5) + "<br><br>"; var pattern = new RegExp('^(https?:\/\/)?'+ //protocol '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ //domain '((\d{1,3}\.){3}\d{1,3}))'+ //IP address '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ //port and path '(\?[;&a-z\d%_.~+=-]*)?'+ // query string '(\#[-a-z\d_]*)?$','i'); // fragment locator urlRegStr += "<b>new RegExp</b><br><br>"; var str1 = 'http:test'; urlRegStr += str1 + ' is ' urlRegStr += pattern.test(str1) + "<br><br>"; urlValOut.innerHTML = urlRegStr; }; </script> </body> </html>
使用 URL() 构造函数
URL() 构造函数返回一个新创建的 URL 对象。如果基本 URL 或结果 URL 无效，则构造函数会抛出 TypeError。
用户可以按照以下语法使用此方法。
语法
var url = new URL(urlStr); new URL(url, base); return url.protocol === 'http:' || url.protocol === 'https:';
前两种语法创建新的 URL，一种带基准，一种不带基准。第二种语法用于检查 URL 协议的有效性。
参数
url − URL 是一个字符串，表示绝对 URL 或相对 URL。相对 URL 必须有基准。对于绝对 URL，构造函数会忽略基准。
urlStr − 用于创建 URL 的字符串。
base − base 是一个可选的字符串参数。默认值为 undefined。
示例
在此程序中，URL 方法验证 URL，并在 URL 无效的情况下返回类型错误。
<html> <body> <h2>Illustrating the valid and invalid URLs with <i>URL method</i></h2> <div id="urlValBtnWrap"> <button id="urlValBtn">Click Me</button> </div> <p id="urlValOut"></p> <script> var urlValBtnWrap = document.getElementById("urlValBtnWrap"); var urlValBtn = document.getElementById("urlValBtn"); var urlValOut = document.getElementById("urlValOut"); var urlStr = ""; urlValBtn.onclick = function(){ urlValBtnWrap.style.display = "none"; let str1 = 'https://teach.tuitor.com'; let url1 = new URL("/", str1); let url2 = new URL(str1); urlStr += "<b>Valid Urls</b><br><br>"; urlStr += "<b>Base</b> " + str1 + "<br><br>"; urlStr += "Url " + url1 + "<br><br>"; urlStr += "Url " + url2 + "<br><br>"; let url6 = new URL('/sub1/sub2', url1); urlStr += "<b>Base</b> " + url1 + "<br><br>"; urlStr += "Url " + url6 + "<br><br>"; let url3 = new URL('/sub1/sub2', url2); urlStr += "<b>Base</b> " + url2 + "<br><br>"; urlStr += "Url " + url3 + "<br><br>"; let url4 = new URL('sub1/sub2', url2); urlStr += "Url " + url4 + "<br><br>"; let url9 = new URL('http://www.test.com', url2); urlStr += "Url " + url9 + "<br><br>"; let url5 = new URL('/sub1/sub2', url3); urlStr += "<b>Base</b> " + url3 + "<br><br>"; urlStr += "Url " + url5 + "<br><br>"; let url7 = new URL('/sub1/sub2', "https://teach.tuitor.com/fr-FR/toto"); urlStr += "<b>Base</b> " + "Nothing" + "<br><br>"; urlStr += "Url " + url7 + "<br><br>"; let url8 = new URL('http://www.test.com', ); urlStr += "<b>Base</b> " + "Empty String" + "<br><br>"; urlStr += "Url " + url8 + "<br><br>"; let url10 = new URL("", "https://test.com/?query=1") urlStr += "Url " + url10 + "<br><br>"; //removes query arguments) let url11 = new URL("/a", "https://test.com/?query=1") urlStr += "Url " + url11 + "<br><br>"; //relative URLs let url12 = new URL("//test.com", "https://test.com") urlStr += "Url " + url12 + "<br><br>"; //relative URLs urlStr += "<b>TypeError Cases</b><br><br>"; try{ url13 = new URL('/sub1/sub2', ''); //'' is not a valid URL new URL('/sub1/sub2'); //'/sub1/sub2' is not a valid URL } catch(e){ urlStr += e + "<br><br>"; } urlStr += "<b>Check Validity</b><br><br>"; urlStr += "https://code.dev.com is " + isValidUrl('https://code.dev.com') + "<br><br>"; urlStr += 'test://code.dev.com is ' + isValidUrl('test://code.dev.com') + "<br><br>"; urlStr += 'Code Dev is ' + isValidUrl('Code Dev'); urlValOut.innerHTML = urlStr; }; function isValidUrl(string) { try { var url = new URL(string); return url.protocol === 'http:' || url.protocol === 'https:'; } catch (err) { return false; } } </script> </body> </html>
本教程介绍了两种验证 URL 的方法。第一种方法建议使用正则表达式匹配或模式测试。第二种方法是内置的 URL 方法。URL 方法比较简单，因为我们可以避免正则表达式中可能遗漏的测试用例。
更新于：2022年11月23日
2K+ 浏览量
广告