jQuery phân tích cú pháp html mà không cần tải hình ảnh

tôi tải html từ các trang khác để trích xuất và hiển thị dữ liệu từ trang đó:jQuery phân tích cú pháp html mà không cần tải hình ảnh

$.get('http://domain.net/205.html', function(html){ 
    console.log($(html).find('#c1034')); 
});

Đó không làm việc nhưng vì $(html) trình duyệt của tôi cố gắng để tải hình ảnh được liên kết trong 205 .html. Những hình ảnh đó không tồn tại trên miền của tôi vì vậy tôi nhận được rất nhiều lỗi 404.

Có cách nào để phân tích trang như $(html) nhưng không tải toàn bộ trang vào trình duyệt của tôi không?

Nguồn

2013-02-27 PiTheNumber

Sử dụng regex và loại bỏ tất cả <img> thẻ

html = html.replace(/<img[^>]*>/g,"");

Nguồn

2013-02-27 14:01:37

Đó làm việc cho tôi. Lưu ý rằng nó sẽ không hoạt động cho các hình nền phong cách. Do đó, bạn sẽ cần một [trình phân tích cú pháp XML] (http://stackoverflow.com/questions/11006216/load-an-html-string-into-jquery-without-requesting-images?rq=1) Tôi đoán vậy. Cảm ơn! – PiTheNumber

@PiTheNumber & Bhuvan: FWIW, mà regex là tầm thường để bỏ qua: http://jsbin.com/wejosoku/1 Tôi muốn nghĩ rằng nó sẽ làm việc với ứng dụng lặp đi lặp lại, nhưng tôi sẽ không muốn đặt cược trang web của tôi không ai có thể nghĩ ra một cách nào đó. Regex về cơ bản là không phù hợp với phân tích cú pháp HTML đáng kể. –

@ T.J.Crowder Tôi biết nó không được lưu nhưng trong trường hợp của tôi, tôi có thể tin tưởng các mã HTML của miền khác. Regex là xấu cho chủ yếu là tất cả mọi thứ và tôi khuyên mạnh mẽ để tránh nó ở đâu có thể. Tôi sẽ rất vui khi thấy một giải pháp khác nhưng một trình phân tích cú pháp html đầy đủ sẽ là lớn cho việc này. – PiTheNumber

Bạn có thể có thể sử dụng jQuerys remove() phương pháp để lựa chọn các yếu tố hình ảnh

console.log($(html).find('img').remove().end().find('#c1034'));

hoặc loại bỏ sau đó từ chuỗi HTML. Một cái gì đó như

console.log($(html.replace(/<img[^>]*>/g,"")));

Về hình ảnh nền, bạn có thể làm một cái gì đó như thế này:

$(html).filter(function() { 
    return $(this).css('background-image') !== ''; 
}).remove();

Nguồn

2013-02-27 14:02:13 Johan

Đầu tiên không hoạt động. '$ (html)' đã tải trang. Thứ hai đã làm việc. Cảm ơn! – PiTheNumber

Sử dụng cách sau để phân tích html sẽ tải hình ảnh tự động.

var wrapper = document.createElement('div'), 
    html = '.....'; 
wrapper.innerHTML = html;

Nếu sử dụng DomParser để phân tích html, hình ảnh sẽ không được tải tự động. Xem https://github.com/panzi/jQuery-Parse-HTML/blob/master/jquery.parsehtml.js để biết chi tiết.

Nguồn

2015-11-20 11:09:07 fudesign2008

Regex sau thay thế mọi sự xuất hiện của <head>, <link>, <script>, <style>, bao gồm thuộc tính background và style từ chuỗi dữ liệu được trả về bởi tải ajax.

html = html.replace(/(<(\b(img|style|script|head|link)\b)(([^>]*\/>)|([^\7]*(<\/\2[^>]*>)))|(<\bimg\b)[^>]*>|(\b(background|style)\b=\s*"[^"]*"))/g,"");

Kiểm tra regex: https://regex101.com/r/nB1oP5/1

Tôi muốn có một cách tốt hơn để làm việc xung quanh (khác so với sử dụng regex thay thế).

Nguồn

2016-01-02 08:24:38 Nik

Xin lỗi vì đã hồi sinh lại câu hỏi cũ, nhưng đây là kết quả đầu tiên khi tìm kiếm cách cố gắng dừng phân tích html khỏi tải nội dung bên ngoài.

Tôi đã trả lời câu trả lời của Nik Ahmad Zainalddin, tuy nhiên có một điểm yếu trong đó bất kỳ yếu tố nào ở giữa <script> thẻ đều bị xóa sổ.

<script> 
</script> 
Inert text 
<script> 
</script>

Trong ví dụ trên, Inert text sẽ bị xóa cùng với thẻ tập lệnh. Thay vào đó, tôi đã thực hiện các bước sau:

html = html.replace(/<\s*(script|iframe)[^>]*>(?:[^<]*<)*?\/\1>/g, "").replace(/(<(\b(img|style|head|link)\b)(([^>]*\/>)|([^\7]*(<\/\2[^>]*>)))|(<\bimg\b)[^>]*>|(\b(background|style)\b=\s*"[^"]*"))/g, "");

Ngoài ra tôi đã thêm khả năng xóa iframe s.

Hy vọng điều này sẽ giúp ai đó.

Nguồn

2016-06-17 02:16:03

Thay vì loại bỏ tất cả các yếu tố img hoàn toàn, bạn có thể sử dụng regex sau để xóa tất cả các thuộc tính src thay vì:

html = html.replace(/src="[^"]*"/ig, "");

Nguồn

2017-04-28 00:42:28 Royalgamer06

Điều đó sẽ phá vỡ html vì thuộc tính src là bắt buộc đối với phần tử ''. Xem https://developer.mozilla.org/de/docs/Web/HTML/Element/img – PiTheNumber

Điều đó có thể đúng, nhưng đó là giải pháp thay thế tốt cho bất kỳ ai sử dụng thẻ img trong công cụ chọn css của họ hoặc cần dữ liệu từ một trong các thuộc tính hình ảnh. – Royalgamer06

jQuery phân tích cú pháp html mà không cần tải hình ảnh

Trả lời

Các vấn đề liên quan