Sử dụng DOMParser để phân tích cú pháp các chuỗi HTML
Tôi đang chơi với plugin WP Rest API để truy cập nội dung từ blog WordPress vào ứng dụng Ionic 2. WP Rest API trả về một chuỗi HTML cho nội dung của các bài đăng, điều này có thể khiến nó khó xử lý. Tuy nhiên, may mắn thay, API Web DOMParser giúp dễ dàng phân tích cú pháp chuỗi html thành một DOM hoàn chỉnh.
Đầu tiên, bạn khởi tạo một version DOMParser mới và chuyển nó vào chuỗi HTML của bạn bằng cách sử dụng parseFromString () . Đối với ví dụ này, giả sử rằng ta đã lưu trữ chuỗi HTML trong một biến có tên là htmlContent:
let parser = new DOMParser();
let parsedHtml = parser.parseFromString(htmlContent, 'text/html');
Và bây giờ parsedHtml là một đối tượng DOM có thể được tương tác với. Hãy extract một vài điều từ nó:
// The src of the first image:
let firstImg = parsedHtml.images[0].src;
// The li elements of the second ul element:
let liElements = parsedHtml.getElementsByTagName("ul")[1].children;
Lấy ví dụ thứ hai với các phần tử li , hãy đi xa hơn một chút và điền một mảng với HTML bên trong của mỗi phần tử:
let rawLiElements = parsedHtml.getElementsByTagName("ul")[1].children;
let liElements = [];
👉 DOMParser vẫn đang trong giai đoạn thử nghiệm nên việc triển khai có thể thay đổi và hỗ trợ có thể bị hạn chế.
Các tin liên quan
Tham chiếu thuộc tính mục tiêu cho thẻ neo trong HTML2016-09-12
HTML AMP, Tổng quan
2016-06-29
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS
2015-05-07
