javascript - 寻找 html 字符串 jquery 解析器(解析 链接和 图像)

Question

我正在寻找 html 字符串 jquery 解析器(解析 <a> 链接和 <img> 图像)或从 html 字符串(HTML 字符串可以非常大)解析所有链接和图像的代码。

示例:

输入:

sdsds<div>sdd<a href='http://google.com/image1.gif'image1</a>  sd</div>
sdsdsdssssssssssssssssssssssssssssssssssss <p> sdsdsdsds  </p>
sdsds<div>sdd<img src='http://google.com/image1.gif'image1 alt="car for family">  sd</div>

输出链接:value+href(如果value为空则不返回该链接)

输出图片:src + alt

找到最有效的方法对我来说非常重要。

---

---

编辑:

函数应该看起来像返回多维数组。

喜欢:arr[链接][href][值] arr[图像][src][alt]

function parseLinksAndImages(htmlString){
.........................
........................
return linksAndImagesArrMultiDimensial;
}

(或以其他更好的方式，如果有的话)

谢谢

Answer 1

假设您的字符串是有效的 HTML，您可以这样做:

尝试一下: http://jsfiddle.net/WsDTL/2/ (从原始版本更新为使用 .each() 而不是 .map() 以避免使用 .split() )

var string = "sdsds<div>sdd<a href='http://google.com/image1.gif'>image1</a>  sd</div>sdsdsdssssssssssssssssssssssssssssssssssss <p> <a href='some/href'></a> sdsdsdsds  </p>sdsds<div>sdd<img src='http://google.com/image1.gif' alt='car for family' />  sd</div>";

var $container = $('<div/>').html(string);

var result = [];

$container.find('a,img').each(function() {
    if(this.tagName.toUpperCase() == 'A') {
        if($.trim( this.innerHTML ) != '') {
            result.push([this.tagName,this.innerHTML,this.href]);
        }
    } else {
        result.push([this.tagName,this.src,this.alt]);
    }
});

alert(result);​

---

编辑:

如果您的意思是不想处理 <a>如果它没有 href属性，然后将代码更改为:

$container.find('a[href],img').each(function() {
    if(this.tagName.toUpperCase() == 'A') {
        result.push([this.tagName,this.innerHTML,this.href]);
    } else {
        result.push([this.tagName,this.src,this.alt]);
    }
});

---

编辑:

对于您评论中的存储，您可以制作 results一个 javascript 对象，并将数组存储在 links 下和 images键。

var string = "sdsds<div>sdd<a href='http://google.com/image1.gif'>image1</a>  sd</div>sdsdsdssssssssssssssssssssssssssssssssssss <p> <a href='some/href'></a> sdsdsdsds  </p>sdsds<div>sdd<img src='http://google.com/image1.gif' alt='car for family' />  sd</div>";

var $container = $('<div/>').html(string);

   // store results in a javascript object
var result = {
     links:[],
     images:[]
}; 

$container.find('a[href],img').each(function() {
    if(this.tagName.toUpperCase() == 'A') {
        result.links.push([this.tagName,this.innerHTML,this.href]);
    } else {
        result.images.push([this.tagName,this.src,this.alt]);
    }
});

alert(result.links);
alert(result.images);

如果您愿意，可以进行 2 个单独的循环。不确定哪个会表现更好。

http://jsfiddle.net/WsDTL/3/