Cách kiểm tra xem Chuỗi JavaScript có phải là URL hợp lệ không

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, httpsmộ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 URLhã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.

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.