如何將HTML字符串拆分爲小塊並剝離外部標籤？

Question

最好用jQuery與上下文保持一致，但純JS顯然很好。

鑑於這樣的字符串，<li><img src="something.jpg"></li><li><img src="something2.jpg"></li>，我怎麼能轉換成這樣：

['<img src="something.jpg">', '<img src="something2.jpg">']

所以我要剝去li標籤離開，並獲得圖像的陣列。我知道我可以用splitli來獲得陣列，但是我怎樣才能輕鬆地將li標籤剝離而不用手工完成？

Answer 1

檢查這個搗鼓了工作演示：http://jsfiddle.net/sMQdw/

// Assuming "string" is your string, this will create an UL in memory and 
// adding the string will build a DOM structure out of it 
var $temp = $("<ul />").html(string); 
var images = []; 
// We then use jQuery to extract the LI elements from the DOM structure and 
// then append the .html() result from each to the array to get the image strings. 
$temp.find("li").each(function() { 
    images.push($(this).html()); 
}); 

Answer 2

var result = []; 
var str = '<li><img src="something.jpg"></li><li><img src="something2.jpg"></li>'; 

$(str).find('img').each(function(){ 
    var $this = $(this); 

    result.push($this.html());  
}); 

這應該工作。

Answer 3

使用更換一個簡單的解決方案，但也可能會更優化

var str = '<li><img src="something.jpg"></li><li><img src="something2.jpg"></li>'; 

str = str.replace(/<\/?li>/g,''); 
str = str.replace('><','>,<'); 
str = str.split(','); 

JSFiddle

Answer 4

最簡單的方法就是：

var string = '<li><img src="something.jpg"></li><li><img src="something2.jpg" /></li>', 
    temp = $(string), 
    contents = temp.contents().map(function(){ 
     return this.outerHTML; 
    }).get(); 
console.log(contents); 
// ["<img src="something.jpg">", "<img src="something2.jpg">"] 
// this is the literal console.log() output, despite looking like a 
// JavaScript string/syntax error. 

JS Fiddle demo。

如果你想img元素（在這種情況下）的陣列可以轉而return this：

var string = '<li><img src="something.jpg"></li><li><img src="something2.jpg" /></li>', 
    temp = $(string), 
    contents = temp.contents().map(function(){ 
     return this; 
    }).get(); 
console.log(contents); 
// ["<img src="something.jpg">", "<img src="something2.jpg">"] 
// this is the literal console.log() output, despite looking like a 
// JavaScript string/syntax error. 

JS Fiddle demo。

參考文獻：

• contents()。
• get()。
• map()。