HomeLập trìnhJavaScriptCách xác thực...

Cách xác thực URL trong JavaScript


Bộ định vị tài nguyên thống nhất (URL) là thứ dẫn bạn đến một trang hoặc tệp trên internet. URL đóng vai trò là địa chỉ của mọi thứ trên internet.

Tất cả các URL hợp lệ đều tuân theo các mẫu nhất định. Vì vậy, nếu bạn biết các mẫu đó, bạn có thể xác định liệu một URL có hợp lệ hay không trong chương trình của mình và đưa ra phản hồi, đưa ra lỗi, v.v.

Trong hướng dẫn này, bạn sẽ tìm hiểu ba phương pháp để kiểm tra xem một chuỗi trong JavaScript có phải là một URL hợp lệ hay không:

Làm thế nào để sử dụng URL Trình xây dựng để xác thực URL

Khi bạn chuyển một chuỗi tới URL hàm tạo, nó trả về một hàm mới URL đối tượng nếu một chuỗi là một URL hợp lệ. Nếu không, nó sẽ trả về lỗi:

const fccUrl = new URL("https://www.freecodecamp.org/");
console.log(fccUrl);

Sau đây là những gì bạn nhận được khi đăng nhập fccUrl đến bảng điều khiển:

Một đối tượng URL trong JavaScript
Một URL đối tượng trong JavaScript

Đối tượng này có nghĩa là chuỗi bạn đã chuyển đến URL hàm tạo là một URL hợp lệ.

Bây giờ, hãy xem những gì bạn nhận được khi chuyển một chuỗi URL không hợp lệ:

const fccUrl = new URL('freecodecamp');
console.log(fccUrl);

chuỗi 'freecodecamp' không phải là một URL hợp lệ. Vì vậy, bạn nhận được những điều sau đây TypeError:

TypeError sau khi chuyển một URL không hợp lệ tới hàm tạo URL
URL không hợp lệ

Tóm lại:

  1. Khi bạn chuyển một chuỗi URL hợp lệ tới URL hàm tạo, nó trả về một hàm mới URL vật.
  2. Khi bạn chuyển một chuỗi URL không hợp lệ tới URL hàm tạo, nó trả về một TypeError.

Với kiến ​​thức này, bạn có thể tạo một chức năng tùy chỉnh để kiểm tra tính hợp lệ của một chuỗi URL nhất định.

Đọc thêm  Khám phá phép lặp JavaScript

Cách tạo chức năng xác thực URL với URL Người xây dựng

Bằng cách sử dụng URL nhà xây dựng và một try...catch tuyên bố, bạn có thể tạo một tùy chỉnh isValidUrl chức năng:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

Các isValidUrl hàm trả về true khi chuỗi bạn chuyển làm đối số là một URL hợp lệ. Nếu không, nó sẽ trả về false:

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://[email protected]')); // true
console.log(isValidUrl('freecodecamp')); // false

Cách xác thực chỉ các URL HTTP bằng URL Người xây dựng

Đôi khi, bạn có thể muốn kiểm tra xem chuỗi có phải là URL HTTP hợp lệ hay không và từ chối các URL hợp lệ khác như 'mailto://[email protected]'.

Nếu bạn nhìn kỹ vào URL đối tượng, một trong những thuộc tính của nó là protocol:

giao thức
Các URL đối tượng có thuộc tính giao thức.

Trong ví dụ trên, giá trị của thuộc tính giao thức là 'https:'.

Để kiểm tra xem một chuỗi có phải là một URL HTTP hợp lệ hay không, bạn có thể sử dụng thuộc tính giao thức của đối tượng URL:

function isValidHttpUrl(string) {
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://[email protected]')); // false
console.log(isValidHttpUrl('freecodecamp')); // false

Sự khác biệt ở đây là bạn không quay trở lại true sau cái mới URL đối tượng được tạo ra. Thay vào đó, bạn đang kiểm tra xem protocol tài sản có giá trị bằng 'http:' hoặc 'https:' và trở về true nếu nó là và false nếu không.

Cách sử dụng gói npm để xác thực URL

Có hai gói NPM bạn có thể sử dụng: is-urlis-url-http.

Các gói này là cách đơn giản nhất để kiểm tra xem một chuỗi có phải là một URL hợp lệ hay không. Tất cả những gì bạn cần làm là chuyển vào một chuỗi dưới dạng tham số và chúng sẽ trả về true hoặc false.

Hãy xem cả hai gói này hoạt động như thế nào.

Cách xác thực URL bằng is-url Bưu kiện

Bạn có thể dùng is-url gói để kiểm tra xem một chuỗi có phải là một URL hợp lệ hay không. Gói này không kiểm tra giao thức của URL được chuyển tới nó.

Đọc thêm  yêu cầu cURL trong javascript - JavaScript

để sử dụng is-urltrước tiên hãy cài đặt nó bằng lệnh bên dưới:

npm install is-url

Sau đó nhập nó và chuyển chuỗi URL của bạn tới nó làm đối số:

import isUrl from 'is-url';

const firstCheck = isUrl('https://www.freecodecamp.org/');
const secondCheck = isUrl('mailto://[email protected]');
const thirdCheck = isUrl('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // true
console.log(thirdCheck); // false

Các is-url trả lại gói true đối với các chuỗi có định dạng URL hợp lệ và false đối với các chuỗi có định dạng URL không hợp lệ.

Trong ví dụ, cả hai firstCheck (với https: giao thức) và secondCheck (với mailto: giao thức) trở lại true.

Cách xác thực URL HTTP bằng is-http-url Bưu kiện

Bạn có thể dùng is-url-http gói để kiểm tra xem một chuỗi có phải là URL HTTP hợp lệ hay không.

Cài đặt gói bằng lệnh sau:

npm install is-url-http

Sau đó nhập nó và chuyển chuỗi URL tới nó như sau:

import isUrlHttp from 'is-url-http';

const firstCheck = isUrlHttp('https://www.freecodecamp.org/');
const secondCheck = isUrlHttp('mailto://[email protected]');
const thirdCheck = isUrlHttp('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // false
console.log(thirdCheck); // false

Trong ví dụ này, chỉ firstCheck lợi nhuận true. Các is-url-http gói không chỉ kiểm tra xem chuỗi có phải là URL hợp lệ hay không mà còn kiểm tra xem đó có phải là URL HTTP hợp lệ hay không. Đó là lý do tại sao nó trở lại falsesecondCheckđây không phải là URL HTTP hợp lệ.

Cách sử dụng Regex để xác thực URL

Bạn cũng có thể sử dụng biểu thức chính quy hoặc biểu thức chính quy để kiểm tra xem một chuỗi có phải là URL hợp lệ hay không.

Tất cả các URL hợp lệ đều tuân theo một mẫu cụ thể. Chúng có ba phần chính, đó là:

  • giao thức
  • Tên miền (hoặc địa chỉ IP)
  • Cổng và đường dẫn

Đôi khi một chuỗi truy vấn hoặc trình định vị đoạn đi theo đường dẫn.

Bạn có thể tìm hiểu thêm về các mẫu URL từ bài viết freeCodeCamp này về cấu trúc của URL.

Biết các URL mẫu được tạo, bạn có thể sử dụng regex để kiểm tra sự tồn tại của các mẫu như vậy trong một chuỗi. Nếu các mẫu tồn tại, thì chuỗi đó sẽ vượt qua bài kiểm tra biểu thức chính quy. Nếu không, nó không thành công.

Đọc thêm  Giải thích về gỡ lỗi – Cách làm cho JavaScript của bạn đợi người dùng của bạn nhập xong

Ngoài ra, bằng cách sử dụng regex, bạn có thể kiểm tra tất cả các URL hợp lệ hoặc chỉ kiểm tra các URL HTTP hợp lệ.

Cách xác thực URL bằng Regex

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.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://freecodecamp.org')); // true
console.log(isValidUrl('freeCodeCamp')); // false

Biểu thức chính quy trong isValidUrl chức năng trên kiểm tra xem một chuỗi có phải là một URL hợp lệ hay không. Kiểm tra giao thức ^([a-zA-Z]+:\\/\\/)? không chỉ giới hạn ở https:.

Đây là lý do tại sao ví dụ thứ hai với mailto: trả về giao thức true.

Cách xác thực URL HTTP bằng Regex

Để sử dụng regex để kiểm tra xem một chuỗi có phải là URL HTTP hợp lệ hay không, bạn cần chỉnh sửa kiểm tra giao thức.

Thay vì ^([a-zA-Z]+:\\/\\/)?bạn nên sử dụng '^(https?:\\/\\/)?':

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(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://freecodecamp.org')); // false
console.log(isValidHttpUrl('freeCodeCamp')); // false

Bây giờ chỉ là ví dụ đầu tiên có giá trị https: trả về giao thức true. Lưu ý rằng chuỗi URL với http: làm việc, quá.

Kết thúc!

Trong bài viết này, bạn đã học cách kiểm tra tính hợp lệ của URL trong JavaScript. Bây giờ bạn đã biết ba phương pháp sau đây để làm như vậy.

  • Làm thế nào để sử dụng URL Trình xây dựng để xác thực URL
  • Cách sử dụng gói npm để xác thực URL (is-urlis-http-url)
  • Cách sử dụng Regex để xác thực URL

Tùy thuộc vào bạn chọn phương pháp nào bạn cảm thấy thoải mái khi làm việc.

Cảm ơn vì đã đọc. Và mã hóa hạnh phúc!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status