使用JavaScript校验URL的方法小结
作者:fairyly
JavaScript中如何校验一个URL?最近遇到几次需要校验URL的,所以本文给大家整理一下几个校验URL的方法,文中有详细的代码讲解和图文参考,具有一定的参考价值,需要的朋友可以参考下
1.使用 URL 构造函数来验证 URL
当传递一个字符串给 URL 构造函数时,如果字符串是一个有效的 URL,将返回一个新的 URL 对象。否则,将返回一个错误。
const url = new URL('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats"
在控制台得到的 URL 对象:
当传递一个无效的 URL 字符串:
const exampleUrl = new URL('example'); console.log(exampleUrl);
字符串 'example' 不是一个有效的 URL。因此,会报错 TypeError:
1.1 使用 URL 构造函数创建一个 URL 验证器函数
使用 URL 构造函数和 try...catch 语句,创建一个函数:
function isValidUrl(string) { try { new URL(string); return true; } catch (err) { return false; } }
如果参数是一个有效的 URL 时,isValidUrl 函数返回 true。否则,返回 false:
console.log(isValidUrl('https://www.example.com/')); // true console.log(isValidUrl('mailto://mail@example.com')); // true console.log(isValidUrl('freecodecamp')); // false
浏览器兼容性:
大部分浏览器都支持的
1.2 使用 URL 构造器只验证 HTTP URL
要检查url是否是一个有效的 HTTP URL,不要其他有效的 URL,如 'mailto://mail@example.com'。
要检查url是否是一个有效的 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(isValidUrl('https://www.example.com/')); // true console.log(isValidUrl('mailto://mail@example.com')); // false console.log(isValidUrl('freecodecamp')); // false
2.使用 npm 包来验证 URL
NPM 包:is-url
和 is-url-http
2.1 使用 is-url 包验证 URL
使用 is-url
包来检查一个字符串是否是一个有效的 URL。这个包并不检查传递给它的 URL 的协议。
安装:
npm install is-url --save
使用:
import isUrl from 'is-url'; const firstCheck = isUrl('https://kikobeats.com'); // true const secondCheck = isUrl('mailto://kiko@beats.com'); // true const thirdCheck = isUrl('example'); // false
2.2 使用 is-url-http 包来验证 HTTP URL
安装:
npm install is-url-http --save
使用:
import isUrlHttp from 'is-url-http'; isUrlHttp('https://kikobeats.com') // ==> true isUrlHttp('https://kikobeats.com') // ==> true isUrlHttp('mailto://kiko@beats.com') // ==> false isUrlHttp('callto:192.168.103.77+type=ip') // ==> false
3.使用 Regex 来验证 URL
使用正则表达式来检查一个url是否是有效的 URL
所有有效的 URL 都遵循一个特定的模式。它们有三个主要部分,分别是:
协议
域名(或 IP 地址)
端口和路径
有时路径后面是一个查询字符串或片段定位符。
3.1 使用正则验证 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.kikobeats.com/')); // true console.log(isValidUrl('mailto://kikobeats.com')); // true console.log(isValidUrl('example')); // false
3.2 使用正则验证 HTTP URL
要使用正则来检查一个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(isValidUrl('https://www.kikobeats.com/')); // true console.log(isValidUrl('mailto://kikobeats.com')); // false console.log(isValidUrl('example')); // false
以上就是使用JavaScript校验URL的方法小结的详细内容,更多关于JavaScript校验URL的资料请关注脚本之家其它相关文章!