URL – hoặc Bộ định vị tài nguyên thống nhất – là văn bản được sử dụng để xác định các tài nguyên như trang web, hình ảnh và video trên internet.
Chúng tôi thường coi URL là địa chỉ trang web và chúng được sử dụng để truyền tệp, email và các ứng dụng khác.
URL bao gồm nhiều phần – giao thức, tên miền, v.v. – cho trình duyệt biết cách thức và vị trí truy xuất tài nguyên.
Trong JavaScript, bạn có thể cần sử dụng một URL trong các thẻ neo hoặc các nút để liên kết người dùng với một trang web khác. Chuỗi URL này phải được xác minh để đảm bảo đó là một URL hợp lệ trong những trường hợp như vậy.
Hướng dẫn này sẽ hướng dẫn bạn một số cách để kiểm tra xem một chuỗi JavaScript có phải là một URL hợp lệ hay không.
Để tìm hiểu cách lấy URL hiện tại trong JavaScript, bạn có thể đọc bài viết này về Cách lấy URL hiện tại trong JavaScript.
Cách kiểm tra xem Chuỗi có phải là URL hợp lệ hay không bằng Regex
Biểu thức chính quy (regex) là các mẫu khớp với các tổ hợp ký tự trong chuỗi JavaScript. Trong JavaScript, các biểu thức chính quy còn được gọi là các đối tượng cung cấp các phương thức khác nhau để thực hiện các hoạt động khác nhau.
Bạn có thể xây dựng một biểu thức chính quy theo hai cách:
- Sử dụng các biểu thức chính quy
- Sử dụng hàm tạo biểu thức chính quy
Ghi chú: Việc sử dụng phương thức biểu thức chính quy là phù hợp khi bạn chỉ muốn kiểm tra xem một chuỗi có phải là một URL hợp lệ hay không và không muốn tạo bất kỳ đối tượng bổ sung nào khác.
Hãy cùng tìm hiểu cách thức hoạt động của hai phương pháp này.
Cách sử dụng biểu thức chính quy
Trong một biểu thức chính quy, mẫu được đặt giữa các dấu gạch chéo, như bạn sẽ thấy bên dưới.
Mẫu này bao gồm việc xác nhận các bộ phận cần thiết trong URL
. Ví dụ, một giao thức, https
một //
và như thế.
const urlPattern = /(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
Cách sử dụng hàm tạo biểu thức chính quy
Để tạo một biểu thức chính quy bằng cách sử dụng phương pháp xây dựng, hãy sử dụng RegExp()
hàm tạo và chuyển mẫu dưới dạng tham số.
const urlPattern = new RegExp('(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?');
Để chứng minh làm thế nào để xác nhận nếu một chuỗi là một URL
hãy tạo một phương thức sẽ xác thực JavaScript String
sử dụng hàm tạo biểu thức chính quy và trả về True
hoặc False
dựa trên mẫu phù hợp.
const isValidUrl = urlString=> {
var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // validate protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // validate domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // validate OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // validate port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // validate query string
'(\\#[-a-z\\d_]*)?$','i'); // validate fragment locator
return !!urlPattern.test(urlString);
}
Cách sử dụng regex để xác thực chuỗi URL
Đoạn mã dưới đây trình bày cách xác thực các chuỗi URL khác nhau bằng phương pháp trên:
var url = "invalidURL";
console.log(isValidUrl(url)); //false
var url = "htt//jsowl"; //false
console.log(isValidUrl(url));
var url = "www.jsowl.com"; //true
console.log(isValidUrl(url));
var url = "https://www.jsowl.com"; //true
console.log(isValidUrl(url));
var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
console.log(isValidUrl(url)); //true
Cách kiểm tra xem Chuỗi có phải là URL hợp lệ hay không bằng Trình tạo URL
Bạn có thể sử dụng URLConstructor để kiểm tra xem một chuỗi có phải là một URL hợp lệ hay không.
URLConstructor (new URL(url)
) trả về một đối tượng URL mới được tạo được xác định bởi các tham số URL.
một JavaScript TypeError
ngoại lệ được đưa ra nếu URL đã cho không hợp lệ.
Ghi chú: Sẽ thích hợp để sử dụng phương pháp này khi bạn muốn xây dựng một đối tượng URL trong chương trình của mình để sử dụng tiếp.
Cú pháp Trình tạo URL
Cú pháp sau đây giải thích cách tạo Đối tượng URL bằng Chuỗi JavaScript.
new URL(url);
new URL(url, base);
Ở đâu,
url
là một chuỗi hoặc bất kỳ đối tượng nào có trình tạo chuỗi đại diện cho một URL tuyệt đối hoặc tương đối. Nếu URL là một URL tuyệt đối, căn cứ sẽ được bỏ qua. Nếu URL là một URL tương đối, căn cứ bắt buộc.base
(tùy chọn) là một chuỗi đại diện cho URL cơ sở. Nó phải được chuyển khi URL là tương đối. Mặc định là không xác định khi bị bỏ qua.
Ví dụ về phương thức Trình tạo URL
Để minh họa cách thức hoạt động của phương thức tạo URL, hãy tạo một hàm lambda trong JavaScript để tạo một URL mới với chuỗi đã truyền.
- Nếu chuỗi là một URL hợp lệ, một đối tượng URL được tạo và
true
Được trả lại - Nếu Chuỗi không phải là một URL hợp lệ, một
Tyeperror
ngoại lệ được ném ra, vàfalse
Được trả lại
const isValidUrl = urlString=> {
try {
return Boolean(new URL(urlString));
}
catch(e){
return false;
}
}
Làm thế nào để sử dụng isValidURL()
phương pháp
Hãy gọi các isValidURL()
phương pháp cho các loại chuỗi khác nhau và xem kết quả.
var url = "invalidURL";
console.log(isValidUrl(url)); //false
var url = "htt//jsowl";
console.log(isValidUrl(url)); //false
var url = "www.jsowl.com";
console.log(isValidUrl(url)); //false
var url = "tcp://www.jsowl.com";
console.log(isValidUrl(url)); //true
var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
console.log(isValidUrl(url)); //true
Trong ba trường hợp đầu tiên, bạn có thể thấy rằng một chuỗi URL không hợp lệ được thông qua. Kết quả là tạo đối tượng URL không thành công với một TypeError
và false
Được trả lại.
Trong hai trường hợp cuối cùng, chuỗi URL hợp lệ được thông qua. Vì vậy, một URL
đối tượng được tạo thành công và True
được trả lại, xác nhận URL thích hợp.
Hãy xem thêm một ví dụ để xác thực một phần URL cụ thể.
Trong ví dụ này, bạn đang xác thực một giao thức cụ thể trong URL. URL phải chứa http
hoặc https
giao thức.
const isValidUrl = urlString=> {
let url;
try {
url =new URL(urlString);
}
catch(e){
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
Ví dụ về cách xác thực một phần của URL
Hãy gọi các isValidURL()
phương pháp cho các loại chuỗi và giao thức khác nhau và xem kết quả.
var url = "tcp://www.jsowl.com";
console.log(isValidUrl(url)); //false
var url = "https://www.jsowl.com";
console.log(isValidUrl(url)); //true
Trong trường hợp đầu tiên, chuỗi URL (tcp://www.jsowl.com) hợp lệ, nhưng nó không chứa một giao thức cụ thể (HTTP
/HTTPS
). Vì vậy, nó trở lại sai.
Trong trường hợp thứ hai, chuỗi URL https://www.jsowl.com Là có hiệu lực và chứa giao thức cụ thể. Vì vậy, nó trở lại thật.
Cách kiểm tra xem Chuỗi có phải là URL hợp lệ hay không bằng phần tử đầu vào
HTML hỗ trợ một phần tử đầu vào với loại url
đặc biệt để đại diện cho các giá trị URL.
Các <input>
phần tử value
thuộc tính chứa chuỗi sẽ tự động được xác thực bằng cách khớp với cú pháp URL (có một URL trống hoặc được tạo đúng) trước khi có thể gửi biểu mẫu.
HTMLInputElement.checkValidity()
phương pháp được sử dụng để kiểm tra xem một chuỗi trong <input>
thuộc tính giá trị của phần tử là URL
. Các checkvalidity()
phương thức trả về true
nếu giá trị là một URL thích hợp và false
nếu đầu vào không phải là một URL thích hợp.
Hãy tạo một phương thức tạo kiểu phần tử đầu vào URL
và xác thực đầu vào bằng cách sử dụng checkValidity()
phương pháp.
const isValidUrl = urlString =>{
var inputElement = document.createElement('input');
inputElement.type="url";
inputElement.value = urlString;
if (!inputElement.checkValidity()) {
return false;
} else {
return true;
}
}
Bây giờ, hãy sử dụng phương pháp này và xác thực các chuỗi khác nhau để xem liệu chúng có phải là URL hợp lệ hay không.
var url = "invalidURL";
console.log(isValidUrl(url)); //false
var url = "htt//jsowl";
console.log(isValidUrl(url)); //false
var url = "www.jsowl.com";
console.log(isValidUrl(url)); //false
var url = "https://www.jsowl.com";
console.log(isValidUrl(url)); //true
var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
console.log(isValidUrl(url)); //true
Đây là cách bạn có thể sử dụng phương thức nhập liệu để kiểm tra xem một chuỗi có phải là một URL hợp lệ hay không.
Cách kiểm tra xem chuỗi có phải là URL hợp lệ hay không bằng phương pháp thẻ neo
Phần này hướng dẫn bạn cách sử dụng HTMLAnchorElement để kiểm tra xem một chuỗi JavaScript có phải là một URL hay không.
Ghi chú: Sẽ thích hợp để sử dụng phương pháp này khi bạn muốn gán một URL cho anchor
của trang web của bạn và đảm bảo rằng chuỗi URL hợp lệ và được gán cho anchor
gắn thẻ đúng cách.
Các HTMLAnchorElement
giao diện đại diện cho các yếu tố siêu liên kết. Nó cung cấp các thuộc tính và phương thức đặc biệt để thao tác bố cục và trình bày các phần tử đó. Nó còn được gọi là thẻ neo.
Bạn có thể chỉ định một URL cho một thẻ neo bằng cách sử dụng href
thuộc tính. Trong khi phân công,
- Nếu một chuỗi URL hợp lệ được chuyển, nó sẽ được gán cho thẻ neo
- Nếu một URL không hợp lệ được chuyển, vị trí trình duyệt hiện tại sẽ được gán cho thẻ neo
- Theo mặc định, thẻ neo sẽ có một URL trống (“”)
Khi URL được chỉ định, bạn có thể trích xuất một phần cụ thể của URL bằng cách sử dụng các thuộc tính được giải thích bên dưới.
Thuộc tính HTMLAnchorElement | cách sử dụng |
---|---|
host |
một chuỗi đại diện cho tên máy chủ và cổng |
hostname |
một chuỗi đại diện cho tên máy chủ |
href |
một chuỗi chứa một URL hợp lệ |
origin |
trả về một chuỗi chứa nguồn gốc, lược đồ, tên miền và cổng |
port |
một chuỗi đại diện cho cổng nếu được chỉ định |
protocol |
một chuỗi đại diện cho giao thức bao gồm dấu (‘: ‘) |
pathname |
một chuỗi chứa URL đường dẫn từ đầu (/) và không bao gồm chuỗi truy vấn |
Bây giờ, hãy xem cách kiểm tra xem chuỗi được chỉ định có phải là một URL thích hợp hay không.
Nếu đó là một URL thích hợp, nó sẽ được gán cho thẻ neo. Nếu không, vị trí trình duyệt hiện tại sẽ được gán cho thẻ neo.
Vì vậy, để kiểm tra xem đó có phải là một URL thích hợp hay không, bạn có thể kiểm tra xem thẻ neo có host
KHÔNG bằng vị trí hiện tại bằng cách sử dụng câu lệnh a.host != window.location.host
.
Hãy nhìn vào mã.
Chúng tôi tạo một hàm lambda và gán nó cho hằng số isValidUrl
trong đoạn mã dưới đây.
Hàm tạo một phần tử thẻ neo và gán chuỗi URL cho thẻ neo. Sau đó, nó sẽ kiểm tra xem host
thuộc tính của phần tử là null
hoặc không được xác định.
Nếu nó không phải là null, nó sẽ kiểm tra xem host
thuộc tính KHÔNG bằng URL trình duyệt hiện tại và trả về True
khi nó không bằng nhau.
Điều này là do nếu URL đã chuyển là hợp lệ thì thẻ liên kết sẽ có giá trị URL. Nhưng nếu URL đã chuyển không hợp lệ, thẻ liên kết sẽ có vị trí trình duyệt hiện tại. Trong trường hợp này, hàm lambda trả về False
.
const isValidUrl = urlString =>{
var a = document.createElement('a');
a.href = urlString;
return (a.host && a.host != window.location.host);
}
Đoạn mã dưới đây gọi hàm lambda isValidUrl()
với các đầu vào khác nhau và in đầu ra tương ứng trong bảng điều khiển.
var url = "invalidURL";
console.log("1.AnchorTag: " +isValidUrl(url)); //false
var url = "htt//jsowl";
console.log("22.AnchorTag: "+isValidUrl(url)); //false
var url = "www.jsowl.com";
console.log("3.AnchorTag: " +isValidUrl(url)); //false
var url = "https://www.jsowl.com";
console.log("4.AnchorTag: " +isValidUrl(url)); //true
var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
console.log("5.AnchorTag: " +isValidUrl(url)); //true
Hướng dẫn này có sẵn trong JSFiddle này.
Phần kết luận
Trong bài viết này, bạn đã học cách kiểm tra xem một chuỗi JavaScript có phải là một URL
sử dụng các phương pháp khác nhau và khi nào thì sử dụng từng phương pháp là phù hợp.
Nếu bạn thích bài viết này, hãy chia sẻ nó.
Bạn có thể xem các hướng dẫn khác của tôi trên blog của tôi, JS Owl.