使用documentFragment解析HTML而不發送HTTP請求

我想解析一個字符串並使DOM樹不在其中。我決定使用documentFragment API和我這樣做，到目前爲止：使用documentFragment解析HTML而不發送HTTP請求

var htmlString ="Some really really complicated html string that only can be parsed by a real browser!"; 
var fragment = document.createDocumentFragment('div'); 
var tempDiv = document.createElement('div'); 
fragment.appendChild(tempDiv); 
tempDiv.innerHTML = htmlString; 
console.log(tempDiv);

但問題是，這個腳本導致我的瀏覽器（Chrome專）發送實際的HTTP請求！我的意思是？以此爲例子：有

Chrome error

是任何變通辦法此：

var htmlString ='<img src="somewhere/odd/on/the/internet" alt="alt?" />'; 
var fragment = document.createDocumentFragment('div'); 
var tempDiv = document.createElement('div'); 
fragment.appendChild(tempDiv); 
tempDiv.innerHTML = htmlString; 
console.log(tempDiv);

導致？或任何其他更好的想法解析HTML字符串？

來源

2012-10-05 Sepehr

我在這裏找到了我的問題的答案在stackoverflow，this answer。答案由一段代碼組成，該代碼使用本地瀏覽器功能解析HTML，但是在不發送HTTP請求的半沙箱環境中。希望它也能幫助其他人。

來源

2012-10-05 14:48:29 Sepehr

只是一點警告。不要依賴所有情況下的代碼。例如，如果html輸入是''，則會提取'x.jpg'文件。 – Alohci

那麼你正在追加元素到頁面，當然瀏覽器將獲取內容。

你可以考慮使用DOMParser

var htmlString ='<img src="somewhere/odd/on/the/internet" alt="alt?" />'; 
var parser = new DOMParser(); 
var doc = parser.parseFromString(htmlString , "text/html");

有代碼出現在MDN Doc page來支持做它沒有原生支持的瀏覽器。

來源

2012-10-05 13:52:30 epascarello

感謝您的回答。我沒有使用'DOMParser'的原因是，它無法解析像Google主頁源代碼這樣複雜的HTML-Strings。不要拿我的話，自己嘗試一下，看看它解析它是如何失敗！ – Sepehr

我對已接受答案的鏈接答案採取了修改方法，因爲我不喜歡創建iframe，通過正則表達式的BUNCH處理字符串，然後將其放入DOM中。

我需要預處理一些來自ajax請求的HTML（這個特定的HTML具有相對路徑的圖像，並且使得ajax請求的頁面與HTML不在同一個目錄中），並將資源路徑設置爲絕對路徑。

我的代碼看起來是這樣的：

var dataSrcStr = data.replace(/src=/g,'data-src='); 
var myContainer = document.getElementById('mycontainer'); 
myContainer.innerHTML = dataSrcStr; 
var imgs = myContainer.querySelectorAll('img'); 
for(i=0,ii=imgs.length;i<ii;i++){ 
    imgs[i].src = 'prepended/path/to/img/'+imgs[i].data-src; 
    delete imgs[i]['data-src']; 
}

顯然，如果有一個與它src=一些清晰的文本，你會被替換的是，但它不會成爲我的內容的情況下，我控制它。

這爲我提供了一個比鏈接答案或使用DOMParser更快的解決方案，同時仍然向DOM添加元素以便能夠以編程方式訪問元素。

來源

2013-05-31 18:06:58 gcochard

試試這個。適用於複雜的html。您的瀏覽器可以顯示任何內容，這可以解析。

var htmlString = "..."; 
var newDoc = document.implementation.createHTMLDocument('newDoc');  
newDoc.documentElement.innerHTML = htmlString;

來源

2017-04-14 18:52:11 iPherian

使用documentFragment解析HTML而不發送HTTP請求

回答

相關問題