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:
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:
Tóm lại:
- Khi bạn chuyển một chuỗi URL hợp lệ tới
URLhàm tạo, nó trả về một hàm mớiURLvật. - Khi bạn chuyển một chuỗi URL không hợp lệ tới
URLhàm tạo, nó trả về mộtTypeError.
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á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:
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-url và is-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ó.
để 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-urlSau đó 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-httpSau đó 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 false vì secondCheckđâ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.
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
URLTrình xây dựng để xác thực URL - Cách sử dụng gói npm để xác thực URL (
is-urlvàis-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!
