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

/<([a-z]+)[^>]*>/ctrl + c

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

/^<([a-z]+)([^>]+)*(?:>(.*)<\/\1>|\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

^<([a-z]+) {#capture1}

^ {#carat}

Khi bạn nhìn thấy một carat ^ ở đầu biểu thức chính quy, điều đó có nghĩa là phần đầu của chuỗi chúng ta đang so sánh. Do đó, chỉ một thẻ HTML được tìm thấy ngay ở đầu chuỗi của chúng tôi mới phù hợp với mẫu. (Lưu ý rằng chúng ta cũng có một ký tự khớp với cuối chuỗi, chúng ta sẽ thảo luận sau. )

< {#openbracket}

Ký tự đơn này < đứng một mình, không được đặt trong bất kỳ dấu ngoặc đơn hoặc dấu ngoặc nào. Điều này có nghĩa là mẫu sẽ khớp với một và chỉ một dấu ngoặc đơn mở, như chúng ta mong đợi từ một thẻ HTML

[a-z] {#class}

Dấu ngoặc vuông [] đánh dấu một lớp ký tự. Bất kỳ ký tự nào trong ngoặc sẽ khớp với mẫu. Trong trường hợp này, chúng tôi khớp bất kỳ chữ cái viết thường nào từ a đến z. Lưu ý rằng đối với các chữ cái, regex phân biệt chữ hoa chữ thường. Nếu chúng ta cũng muốn khớp các chữ in hoa, lớp ký tự của chúng ta sẽ là [A-Za-z]. Nếu chúng ta chỉ muốn khớp một số ít ký tự, chúng ta có thể sử dụng [abc123] để chỉ khớp chữ thường a, b, c hoặc các chữ số 1, 2 và 3

+ {#cộng}

Dấu cộng + là một định lượng. Nó mô tả bao nhiêu lần lớp ký tự trước đó có thể được lặp lại. Plus có nghĩa là một lần nữa. Điều đó có nghĩa là chúng ta phải có ít nhất một ký tự khớp với [a-z], nhưng hai hoặc bất kỳ số lượng nào vượt quá cũng sẽ khớp. Các định lượng khác bao gồm dấu hoa thị *, nghĩa là không thêm lần nào nữa (về cơ bản làm cho lớp ký tự trở thành tùy chọn), trong khi dấu chấm hỏi ?

(. ) {#chụp}

Cuối cùng, bạn sẽ nhận thấy rằng phân đoạn này được đặt trong dấu ngoặc đơn ( ). Dấu ngoặc đơn đánh dấu một nhóm chụp. Điều này có nghĩa là biểu thức chính quy sẽ ghi nhớ phân đoạn của mẫu khớp với mọi thứ bên trong các dấu ngoặc đơn đó. Chúng ta có thể tham khảo lại nhóm chụp này sau. JavaScript cũng sẽ theo dõi nội dung của nhóm chụp này

Vẫn còn với tôi? . Đó là điểm bắt đầu của thẻ HTML—các đoạn như

Và những gì về nhóm chụp đầu tiên? . Đó là tên thẻ của chúng tôi, hiện chúng tôi đang theo dõi

([^>]+)* {#capture2}

Bạn sẽ nhận thấy rằng chúng tôi đang cô lập một nhóm chụp thứ hai

[^>] {#class2}

Lần trước chúng ta đã thấy một carat ^, nó biểu thị điểm bắt đầu của chuỗi. Tuy nhiên, trong một lớp ký tự, ^ có một ý nghĩa khác. để loại trừ một ký tự khỏi lớp. Chúng tôi đang loại trừ > ở đây, nhưng đó là định nghĩa duy nhất của lớp này. Nếu một lớp ký tự chỉ mô tả các loại trừ, thì bất kỳ ký tự nào NGOẠI TRỪ các ký tự bị loại trừ sẽ khớp. Bất kỳ ký tự nào không phải là >, 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 ([^<]+)* is optional and will include any collection of one or more non-> 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 <, then /, then capturing group 1, then >. 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?