Question

最好使用jQuery与上下文保持一致，但纯JS显然很好。

给定这样的字符串<li><img src="something.jpg"></li><li><img src="something2.jpg"></li>，如何将其转换为：

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

所以我想剥离li标签并获取图像数组。我知道我可以split li来获取数组，但是如何在不手动删除的情况下轻松删除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

参考文献：

如何将HTML字符串拆分成条并剥离外部标记？

4 个答案: