Regex khớp với thẻ mở và đóng html

/]*>/
được kèm theo thẻ đóng trong ngoặc với dấu gạch chéo và tên thẻ của nó, e. g. , 
, 

Vì vậy, để chọn ra một thẻ HTML, chúng tôi viết một biểu thức chính quy có thể tính đến các khả năng khác nhau này. Hãy xem xét regex này

/^]+]*[?:>[.*]|\s+\/>]$/

Nếu điều đó có vẻ vô nghĩa, thì đó là bởi vì một biểu thức chính thường thoạt nhìn. Phải mất một thời gian để chia nhỏ một biểu thức chính quy dài và hiểu ý nghĩa của mô hình của nó. Hãy phá vỡ regex này từng mảnh. Tìm trong mục lục để biết giải thích cho từng phần của biểu thức chính quy dài này

Mục lục

/ {#gạch chéo}

Mỗi biểu thức chính quy được đặt trong dấu gạch chéo về phía trước. Các ngôn ngữ lập trình nhận ra cú pháp này để biểu thị một biểu thức chính quy

^, bao gồm chữ cái, chữ số, ký hiệu và khoảng trắng khớp với lớp ký tự này

+ {#cộng2}

Như trước đây, + khớp với một hoặc nhiều ký tự không phải->

[. ]* {#dấu hoa thị}

Like we mentioned above, the asterisk * matches zero or more times. Thus, our second capturing group [[^ characters. What is this very flexible pattern looking for? Anything that comes after the tag name and before the closing bracket >. That includes the tags attributes. That includes anything like classes or ids, href, src, or flags like selected or disabled.

Hãy xem một ví dụ

Nhóm chụp đầu tiên [[a-z]+] lấy tên thẻ [tùy chọn] và ghi nhớ nó sau này. Nhóm chụp thứ hai [[^>]+]* khớp với tất cả các thuộc tính và cờ [value="United States" id="US" selected]. Điều đó cũng được lưu trữ

[?. . ] {#noncapture}

Ở đây chúng ta có một nhóm khác bắt đầu bằng ?. Những nhân vật này?. biểu thị một nhóm không chụp. Một chuỗi phải khớp với mọi thứ bên trong một nhóm không chụp, nhưng nhóm này sẽ không được ghi nhớ sau này. Bạn sẽ nhận thấy rằng có các nhóm chụp trong nhóm không chụp này. Đó là những nhóm phụ mà chúng ta sẽ quan tâm hơn

>[. *] {#giai đoạn = Stage}

Ký tự đầu tiên được so khớp trong phân đoạn này là >, biểu thị phần cuối của thẻ HTML. Nhưng tại sao phần cuối của thẻ lại xuất hiện ở giữa biểu thức chính quy?

Tiếp theo là nhóm chụp thứ ba [. *]. giai đoạn. khớp với bất kỳ ký tự nào. Vì vậy, theo thẻ HTML hoàn chỉnh, nhóm chụp thứ ba khớp với bất kỳ chuỗi nào hoặc không có chuỗi nào cả

{#escape}

/\ được cho là gì? . Để khớp với dấu gạch chéo lên /, chúng ta cần thoát nó. Điều này là do / là một ký tự chức năng trong biểu thức chính quy, đánh dấu phần đầu và phần cuối của mẫu

Còn \1 thì sao? . Chụp nhóm 1 khớp với tên thẻ. Điều này không chỉ lặp lại mô hình chụp nhóm 1, nó khớp chính xác với cùng một văn bản mà nhóm 1 đã tìm thấy. Do đó, nếu tên thẻ là div, \1 cũng phải khớp với div;

Putting this segment together, we match . You've likely caught on that this segment finds the closing tag that pairs with the opening tag we found previously. [.*] allows for any text that comes in between them. That means it can match any text or enclosed tags!

{#đường ống}

Ống. tách các mẫu thay thế. là một mẫu hợp lệ, nhưng những gì tiếp theo. có thể khớp thay vì

\s+/> {#ngắn}

Một chữ cái thoát là cách viết tắt của một lớp ký tự thường được sử dụng. Ở đây, \s khớp với bất kỳ ký tự khoảng trắng nào. dấu cách, tab hoặc ký tự xuống dòng. Các lớp hữu ích khác bao gồm \w [bất kỳ ký tự từ nào [a-zA-Z0-9_]] và \d [bất kỳ chữ số nào [0-9]]

Thẻ nào có cả mở và đóng?

Thẻ mở và đóng chính xác của đầu là gì?

Thẻ đóng có phải là tùy chọn không?