寻找html字符串jquery解析器（解析<a> links and <img/>images)</a>

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>

输出链接：值+ href（如果值为空则不返回此类链接）

输出图片：src + alt

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

---

---

修改

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

喜欢：arr [links] [href] [value] arr [images] [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/

Answer 2

您可以像这样简单地浏览它们：

$('a').each(function(){
   if ($(this).attr('href') && $(this).text()) { // get only links with href set
      // your code...
   }
});

$('img').each(function(){
   if ($(this).attr('src') && $(this).attr('alt')) { //get images with src and alt set
     // your code...
   }
});