Regex cho các thẻ HTML

Giả sử bạn nhận được một loạt tài liệu từ khách hàng. Các tài liệu này đã được xuất từ ​​một số CMS lỗi thời và chúng chứa đầy các thẻ HTML cũ (và có lẽ không hợp lệ). Những tài liệu này có nội dung tuyệt vời, vượt thời gian, nhưng chúng cần được làm sạch kỹ lưỡng, sau đó là một số định dạng mới (kiểu chữ). Có lẽ bạn muốn định dạng lại tài liệu bằng cách sử dụng markdown (.md)

Sẽ thật tệ nếu phải xóa tất cả HTML theo cách thủ công, phải không?

Bằng cách chạy biểu thức chính quy <[^<>]+> bên trong trình soạn thảo văn bản hoặc IDE của bạn, bạn có thể tìm thấy tất cả các thẻ HTML cùng một lúc. Sau đó, bạn có thể thay thế chúng ngay lập tức bằng cách nhấp vào nút Thay thế tất cả trong trình chỉnh sửa của mình

Video giới thiệu

Trong phần trình diễn ở trên, bạn thấy tôi làm như sau

• Mở thanh tìm kiếm của VSCode
• Dán biểu thức chính quy <[^<>]+>
• Kích hoạt chức năng Sử dụng biểu thức chính quy
• Nhấn enter để bắt đầu tìm kiếm
• Thay thế tất cả các thẻ HTML bằng một chuỗi rỗng
• Chọn tất cả văn bản của tôi, nhấp chuột phải và định dạng lại nó (không cần thiết, tôi chỉ làm điều đó cho có vẻ. )

Hãy cẩn thận. luôn tạo bản sao lưu của bất kỳ tệp nào trước khi bạn thực hiện các thay đổi lớn đối với tệp đó. Có thể tài liệu bạn đang dọn dẹp chứa một số URL có giá trị, URL này sẽ bị xóa nếu bạn thay thế các thẻ HTML bằng một chuỗi trống, như trong ví dụ trên

Regex hay Regexp, viết tắt của biểu thức chính quy, là một mẫu tìm kiếm, bao gồm một chuỗi ký tự cụ thể. Ứng dụng thực tế của regex bao gồm. kiểm tra xem tên người dùng, mật khẩu và/hoặc email mới tạo có đáp ứng một tiêu chí nhất định hay không, xác thực số điện thoại, xác thực URL, tìm kiếm và thay thế văn bản trong trình soạn thảo văn bản hoặc trình xử lý văn bản, v.v.

Mục lục

Tổng quan

Trong tài liệu này, regex sau

^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$

sẽ được kiểm tra. Mẫu của biểu thức này tìm kiếm thẻ HTML, bao gồm cả thẻ tự đóng. Cụ thể, nó tìm kiếm mẫu của < và > và < và > hoặc />, cũng như các tên thẻ phù hợp. Trong mục lục, có một phác thảo về các chủ đề có thể hoặc không thể được thảo luận với ví dụ regex

Thành phần Regex

mỏ neo

Thay vì khớp với (các) ký tự, một ký tự neo khớp với một vị trí trước hoặc sau (các) ký tự

AnchorDescription^Khớp với mẫu ở đầu văn bản$Khớp với mẫu ở cuối văn bản\bKhớp với ranh giới từ

^<([a-z]+)([^<]+)(?:>(.)|\s+/>)$

• Dấu nháy neo được sử dụng để tìm kiếm phần đầu của văn bản đã chọn, bởi vì thông thường trong tài liệu HTML, các thẻ HTML được viết trước trong phần tử HTML
• Cuối cùng, sẽ có xác thực nếu phần cuối khớp với mẫu của thẻ đóng hoặc thẻ tự đóng

định lượng

Các bộ định lượng được sử dụng để đối sánh số lần một mẫu biểu thức chính quy của bạn được lặp lại. Theo mặc định, một regex là tham lam, có nghĩa là các trận đấu sẽ càng dài càng tốt. Ngược lại sẽ là một trận đấu lười biếng

Greedy Quantifier Lazy QuantifierMô tả<1<2Kết hợp 0 ​​hoặc nhiều phiên bản<3<4Kết hợp 1 hoặc nhiều phiên bản<5<6Kết hợp 0 ​​hoặc một phiên bản<7<8Kết hợp num phiên bản<9>0Kết hợp ít nhất num phiên bản_______5_______số 1_______5 _______2Kết hợp từ số phiên bản

^<([a-z]<3)([^<]<3)<1(?:>(.*)|\s<3/>)$

• >7 kiểm tra 1 hoặc nhiều chữ thường
• >8 kiểm tra 1 hoặc nhiều ký tự không phải là <
• <0 kiểm tra 0 hoặc nhiều phiên bản của nhóm chụp đó
• <1 kiểm tra 1 hoặc nhiều khoảng trắng

Cấu trúc nhóm

Nhóm đang nắm bắt (các) chuỗi con của văn bản, nghĩa là văn bản đã chọn được coi là một đơn vị. Các nhóm chụp có thể được đặt tên

NhómMô tả<2Chụp mẫu trong các dấu ngoặc đơn<3Bỏ qua mẫu trong các dấu ngoặc đơn<4Chụp mẫu trong các dấu ngoặc đơn nếu nó cũng đúng<5Nhóm chụp ảnh được đặt tên<6Đã đặt tên lại tham chiếu, khớp với nhóm chụp ảnh trước đó

^<<7 <8*<9$

• <7 là nhóm chụp đầu tiên, nhóm này trở nên hữu ích trong việc so sánh các thẻ đóng
• <8 là nhóm chụp thứ hai, chụp các thuộc tính HTML, chẳng hạn như lớp hoặc src
• >2 tham chiếu nhóm chụp đầu tiên và kiểm tra giá trị tương tự
• <9 là một nhóm không ghi lại, ghi lại nội dung của phần tử HTML

Biểu thức khung

Biểu thức dấu ngoặc khớp với danh sách (các) mẫu được đặt trong dấu ngoặc vuông, >4

Biểu thứcMô tả>5(Ở đầu danh sách) Bỏ qua tất cả các mẫu trong danh sách>6Viết tắt của phạm vi bao gồm

^<(>7+)(>8+)(?:>(.)|\s+/>)$

• >8 tạo một danh sách chứa các ký tự không phải là <
• >7 tạo danh sách chứa các chữ cái trong bảng chữ cái viết thường

Lớp nhân vật

Các lớp ký tự phân loại các loại ký tự khác nhau

ClassDescription/>2Một chữ số từ 0 đến 9/>3Không có chữ số (nghịch đảo của \d)/>4Bất kỳ khoảng trắng nào/>5Không có khoảng trắng (nghịch đảo của \s)/>6Bất kỳ bảng chữ cái Latinh nào, bao gồm cả dấu gạch dưới/>7Bất kỳ chữ cái hoặc khoảng trắng không phải Latinh nào (nghịch đảo của \w)/>8Bất kỳ ký tự nào ngoại trừ một dòng mới

^<([a-z]+)([^<]+)(?:>(.)|/>9/>)$

• <1 biểu thị khoảng trắng để phù hợp với định dạng của thẻ đóng

Toán tử OR

Toán tử OR, ký hiệu là ^1, là toán tử logic cung cấp một biểu thức thay thế trong mẫu tìm kiếm

^<([a-z]+)([^<]+)(?:>(.)^1\s+/>)$

• ^3 đại diện cho khả năng có thẻ đóng hoặc thẻ tự đóng

cờ

Cờ là các tham số tùy chọn có thể sửa đổi thêm biểu thức chính quy

CờMô tả^4Bỏ qua phân biệt chữ hoa chữ thường^5Khớp cho tất cả các lần xuất hiện^6Khớp cả đầu và cuối của mỗi dòng mới^7Cho phép khớp bên ngoài bộ ký tự UTF-16^8Cho phép khớp từ một vị trí bắt đầu khác^9Cho phép khớp mọi thứ kể cả các dòng mới

Cờ không được sử dụng trong ví dụ này

nhân vật thoát

Ký tự thoát, được biểu thị bằng cách thêm dấu gạch chéo ngược, $0, được sử dụng để thoát khỏi mục đích ban đầu của ký tự và cho phép tìm kiếm các ký tự đặc biệt. Đây là danh sách các ký tự đặc biệt, $1, sẽ cần thoát ký tự để tìm kiếm

Ký tự thoát không được sử dụng trong ví dụ này

Tác giả

Justin Hui là một nhà phát triển web Front-end đầy tham vọng, anh đã tự học một phần và hiện đang đăng ký một khóa đào tạo mã hóa

Làm cách nào để tìm các thẻ HTML bằng regex?

Bạn có thể sử dụng regex trên HTML không?

HTML regex là gì?

*$ nghĩa là gì trong regex?