2013-02-27 19 views
9

我加載HTML從其他頁面提取和顯示數據從該網頁:jQuery的解析HTML,而不加載圖像

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

這的工作,但由於$(html)我的瀏覽器嘗試加載在205鏈接的圖像html的。這些圖像不存在於我的域名,所以我得到了很多404錯誤。

有沒有辦法解析頁面,如$(html),但沒有加載整個頁面到我的瀏覽器?

回答

15

使用正則表達式,並刪除所有<img>標籤

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

爲我工作。注意它不適用於樣式背景圖像。因此,我想你需要一個[XML解析器](http://stackoverflow.com/questions/11006216/load-an-html-string-into-jquery-without-requesting-images?rq=1)。謝謝! – PiTheNumber 2013-02-27 14:05:04

+0

@PiTheNumber&Bhuvan:FWIW,這個正則表達式很簡單:http://jsbin.com/wejosoku/1我想它會在重複應用程序中工作,但我不想打賭我的網站沒有人能夠想出辦法。正則表達式基本上不適用於重要的HTML解析。 – 2014-05-20 06:59:01

+0

@ T.J.Crowder我知道這不是保存,但在我的情況下,我可以信任其他域的HTML代碼。正則表達式對大多數情況都不好,我強烈建議儘可能避免它。我會很高興看到另一個解決方案,但完整的HTML解析器將是這個大。 – PiTheNumber 2014-05-20 11:33:41

1

您既可以使用jQuerys remove()方法來選擇圖像元素

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

或從HTML字符串,然後刪除。像

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

關於背景圖片的東西,你可以做這樣的事情:

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

第一個沒有工作。 '$(html)'已經加載頁面。第二個工作。謝謝! – PiTheNumber 2013-02-27 14:09:16

1

以下正則表達式替換所有發生的<head>, <link>, <script>, <style>,包括backgroundstyle屬性來自ajax負載返回的數據字符串。

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

測試正則表達式:https://regex101.com/r/nB1oP5/1

我希望有(比替換使用正則表達式等)一個更好的辦法來解決。

3

對不起,以恢復舊的問題,但這是搜索如何嘗試停止解析HTML加載外部資產時的第一個結果。

我拿了Nik Ahmad Zainalddin的回答,不過有一個弱點,就是<script>標籤之間的任何元素都被擦掉了。

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

在上面的例子Inert text將與腳本標記一起去除。我最終做了以下代替:

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, ""); 

此外,我增加了刪除iframe s的能力。

希望這可以幫助別人。

0

而是完全移除所有IMG元素,你可以使用下面的正則表達式來刪除所有SRC屬性來代替:

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

這會破壞html,因爲''元素的src屬性是強制性的。見https://developer.mozilla.org/de/docs/Web/HTML/Element/img – PiTheNumber 2017-05-08 10:19:58

+0

這也許是對的,但對於任何在其CSS選擇器中使用img標籤或需要來自其中一個圖像屬性。 – Royalgamer06 2017-05-08 14:26:14