Làm cách nào để lấy thẻ neo từ chuỗi trong JavaScript?
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 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, biểu thức chính quy còn được gọi là đối tượng cung cấp các phương thức khác nhau để thực hiện các thao tác khác nhau Bạn có thể xây dựng một biểu thức chính quy theo hai cách 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 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
Cách sử dụng hàm tạo biểu thức chính quyĐể tạo biểu thức chính quy bằng cách sử dụng phương thức xây dựng, hãy sử dụng hàm tạo 6 và chuyển mẫu dưới dạng tham số
Để trình bày cách xác thực nếu một chuỗi là một 3, hãy tạo một phương thức sẽ xác thực một JavaScript 8 bằng cách sử dụng hàm tạo biểu thức chính quy và trả về 9 hoặc 0 dựa trên mẫu phù hợp
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 1Cách kiểm tra xem Chuỗi có phải là URL hợp lệ hay không bằng Trình tạo URLBạn có thể sử dụng URLConstructor để kiểm tra xem chuỗi có phải là URL hợp lệ không URLConstructor ( 1) trả về một đối tượng URL mới được tạo được xác định bởi các tham số URLMột ngoại lệ JavaScript 2 đượ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 URLCú pháp sau giải thích cách tạo Đối tượng URL bằng Chuỗi JavaScript 4Ở đâu,
Ví dụ về phương thức Trình tạo URLĐể minh họa cách 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
0Cách sử dụng phương phá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); } 8Hãy gọi phương thức 8 cho các loại chuỗi khác nhau và xem kết quả 3Trong 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 chuyển. Do đó, việc tạo đối tượng URL không thành công với 2 và 7 được trả vềTrong hai trường hợp cuối cùng, chuỗi URL hợp lệ được chuyển. Vì vậy, một đối tượng 3 được tạo thành công và 9 được trả về, xác nhận URL thích hợpHã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 giao thức 14 hoặc 4 0Ví dụ về cách xác thực một phần của URLHãy gọi phương thức 8 cho các loại chuỗi và giao thức khác nhau và xem kết quả 2Trong 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ể ( 17/ 18). Vì vậy, nó trả về falseTrong trường hợp thứ hai, chuỗi URL https. //www. jsowl. com hợp lệ và chứa giao thức cụ thể. Vì vậy, nó trả về đúng 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àoHTML hỗ trợ phần tử đầu vào có loại 3, đặc biệt để biểu thị các giá trị URLThuộc tính 41 của phần tử 40 chứa chuỗi được tự động xác thực bằng cách đối sánh cú pháp URL (có URL trống hoặc được tạo đúng) trước khi có thể gửi biểu mẫuPhương thức 42 được sử dụng để kiểm tra xem một chuỗi trong thuộc tính giá trị của phần tử 40 có phải là 3 hay không. Phương thức 45 trả về 5 nếu giá trị là một URL thích hợp và 7 nếu đầu vào không phải là một URL thích hợpHãy tạo một phương thức tạo loại phần tử đầu vào 3 và xác thực đầu vào bằng phương thức 49 6Bây giờ, hãy sử dụng phương thức này và xác thực các chuỗi khác nhau để xem chúng có phải là URL hợp lệ không 0Đâ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ẻ neoPhầ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ú. Bạn nên sử dụng phương pháp này khi muốn gán URL cho thẻ 00 trên trang web của mình và đảm bảo rằng chuỗi URL hợp lệ và được gán đúng cho thẻ 00Giao diện 02 đại diện cho các phần 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ẻ neoBạn có thể gán URL cho thẻ neo bằng thuộc tính 03. Trong khi phân cô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 HTMLAnchorElement atributeusage 04a chuỗi biểu thị tên máy chủ và port 05a chuỗi biểu thị tên máy chủ 03a chuỗi chứa URL hợp lệ 07trả về một chuỗi chứa nguồn gốc, lược đồ của nó, tên miền và cổng 08a chuỗi biểu thị cổng nếu được chỉ định 09a chuỗi biểu thị giao thức bao gồm dấu (' 30') 31a chuỗi chứa Bây giờ, hãy xem cách kiểm tra xem chuỗi được chỉ định có phải là URL thích hợp không Nếu đó là một URL thích hợp, nó sẽ được gán cho thẻ neo. Khác, 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 04 của thẻ neo có KHÔNG bằng vị trí hiện tại hay không bằng cách sử dụng câu lệnh 33Hã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ố 34 trong mã bên dướiHàm tạo phần tử thẻ neo và gán chuỗi URL cho thẻ neo. Sau đó, nó kiểm tra xem thuộc tính 04 của phần tử có phải là 36 hay không được xác địnhNếu nó không phải là null, nó sẽ kiểm tra xem thuộc tính 04 KHÔNG bằng URL trình duyệt hiện tại hay không và trả về 9 khi nó không bằngĐ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ề 0 1Đoạn mã dưới đây gọi hàm lambda 00 với các đầu vào khác nhau và in đầu ra tương ứng trong bảng điều khiển 2Hướng dẫn này có sẵn trong JSFiddle này Phần kết luậnTrong 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à 3 hay không bằ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ợpNế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 QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Kiến trúc sư giải pháp AWS và người viết kỹ thuật toàn thời gian tại stackvidhya. com và jsowl. com Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Làm cách nào để lấy giá trị thẻ neo trong JavaScript?Sử dụng Phương thức querySelectorAll()
. phương thức querySelectorAll() có thể được sử dụng để lấy giá trị của thuộc tính đích của liên kết hoặc thẻ neo.
Làm cách nào để thêm thẻ neo vào chuỗi JavaScript?createTextNode("Đây là liên kết"); . . Create an anchor element.. Tạo một nút văn bản với một số văn bản sẽ hiển thị dưới dạng liên kết Append the text node to the anchor element.. Set the title and href property of the element.. Append element in the body.. Làm cách nào để lấy văn bản bên trong JavaScript thẻ neo?Sử dụng thuộc tính textContent để lấy văn bản của phần tử liên kết , e. g. const văn bản = liên kết. văn bảnnội dung. Thuộc tính textContent sẽ trả về nội dung văn bản của phần tử
What is anchor (< A >) tag?An anchor là một đoạn văn bản đánh dấu phần đầu và/hoặc phần cuối của một liên kết siêu văn bản . Văn bản giữa thẻ mở và thẻ đóng là điểm bắt đầu hoặc điểm đến (hoặc cả hai) của liên kết. Các thuộc tính của thẻ neo như sau. HREF. |