Regex khớp thẻ HTML

Dùng /<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g để tìm mọi kết quả khớp trong một văn bản. Mỗi ví dụ bên dưới đều đã được kiểm thử với mẫu này, và bạn có thể mở nó trong Regex Tester với sẵn văn bản mẫu.

Cập nhật

/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g
Mở trong Regex Tester

Văn bản mẫu

<p class="intro">Hello <strong>world</strong><br/></p><my-card id="x"></my-card>

7 kết quả khớp

<p class="intro"> <strong> </strong> <br/> </p> <my-card id="x"> </my-card>

Mẫu hoạt động như thế nào

PhầnÝ nghĩa
<Dấu ngoặc nhọn mở
\/?Dấu gạch chéo tùy chọn cho thẻ đóng
[A-Za-z][A-Za-z0-9-]*Tên thẻ, bao gồm cả phần tử tùy chỉnh như my-card
(?:\s[^<>]*)?Thuộc tính tùy chọn
\/?>Dấu gạch chéo tự đóng tùy chọn và dấu ngoặc nhọn đóng

Ví dụ code

JavaScript

const matches = text.match(/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g) ?? [];

Python

import re

matches = re.findall(r'</?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?/?>', text)

PHP

preg_match_all('/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/', $text, $m);
$matches = $m[0];

Lưu ý và giới hạn

Phù hợp để tìm kiếm nhanh và tô sáng, nhưng regex không thể phân tích HTML một cách đáng tin cậy (ví dụ comment, script, hoặc thuộc tính chứa dấu >). Với những việc quan trọng, hãy dùng DOMParser hoặc một bộ phân tích HTML thật sự. Để xóa thẻ và giữ lại nội dung văn bản, xem xóa thẻ HTML bằng regex.

Câu hỏi thường gặp

Regex để khớp thẻ HTML là gì?
/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g — nó tìm mọi kết quả khớp trong văn bản. Xem bảng phía trên để biết mỗi phần làm gì.
Có hoạt động trong Python và PHP không?
Có — các ví dụ code ở trên dùng cùng mẫu này với re trong Python và các hàm preg trong PHP.
Làm sao để kiểm tra regex này?
Nhấn “Mở trong Regex Tester” — mẫu, cờ và văn bản mẫu sẽ tự động được tải, và các kết quả khớp được tô sáng khi bạn chỉnh sửa.