使用JavaScript校驗URL的方法小結

更新時間：2023年12月06日 10:18:00 作者：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 構造函數創(chuàng)建一個 URL 驗證器函數

使用 URL 構造函數和 try...catch 語句，創(chuàng)建一個函數：

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 的協(xié)議。

安裝：

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 都遵循一個特定的模式。它們有三個主要部分，分別是：

協(xié)議
域名（或 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，需要使用協(xié)議檢查。

使用 '^(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的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: