如何使用javascript从html字符串中提取所有图像URL和href值？

我有一个HTML字符串，用于保存列表项集。我想从

集合中提取图像url和相应的href值，并将这些值用作以后的变量

    <img src="./season/123434mango.jpg" width="180" height="148"
         alt="mango season" class="png">
    <a href="/mango/"  class="corners">&nbsp;</a>

集合示例：

 <li>
            <img src="./season/123434mango.jpg" width="180" height="148"
                 alt="mango season" class="png">
            <a href="/mango/"  class="corners">&nbsp;</a>


                <div class="thumbnail_label">ok</div>


          <div class="details">
            <div class="title">
              <a  href=
              "/mango/"> mango</a>
              <span class="season">2</span>
            </div>
            <ul class="subject">
              <li>read</li>
            </ul>
            <ul class="sub-info">
              <li class="location">Europe</li>
              <li class="price">2</li>
            </ul>
          </div>
        </li>

好啊
2.

阅读


欧洲
2

如果使用jQuery，则可以执行以下操作：

var data = [];

$($.parseHTML(siteContents)).each(function() {
    $(this).find("img").each(function() {
        var parent = $(this).parent();

        data.push({
                     SRC: $(this).attr("src"),
                     HREF: parent.find("a").attr("href"),
                     LOCATION: parent.find(".location").text(),
                     PRICE: parent.find(".price").text(),
                     SUBJECT: parent.find(".subject li").text()
        });
    });
});

然后可以使用包含对象的数组“数据”。每个都有一个“SRC”和与之关联的“HREF”属性

请参见此以了解正在使用的示例

---

根据评论更新

---

看看这个例子。关键的变化不是寻找“li”，而是传递它$.parseHTML（siteContents）

如果您正在使用jQuery，这将起到一定的作用，并将被组织起来。我更新了一个解析的HTML

//而不是使用每一个，始终考虑使用，将更快

    var imagesSourceAndLinkHref = {sources: [], hrefs: []},
    i = 0,
    code = $.parseHTML('<div><li><img src="./season/123434mango.jpg" width="180" height="148" alt="mango season" class="png " /></li></div>'),
    list = $(code).find('li'),
    images = list.find('img'),
    links = list.find('a');

for(i; i < images.length; i++) {
    imagesSourceAndLinkHref.sources.push(images.attr('src'));
}

for(i = 0; i < links.length; i++) {
    imagesSourceAndLinkHref.hrefs.push(links.attr('href'));
}

console.log(imagesSourceAndLinkHref);

var-imagesSourceAndLinkHref={sources:[]，hrefs:[]}，
i=0，
代码=$.parseHTML（'
'），
列表=$（代码）.find（'li'），
images=list.find（'img'），
links=list.find（'a'）；
对于（i；i

看到这个了吗

---

干杯

您正在使用jquery吗？还是纯javascript？还有，到目前为止你都尝试了什么？我正在使用纯javascript。谢谢你的回复。chris my html源代码称为来自getjson的代码。您能告诉我如何将您的代码与我自己的代码变量一起使用吗？$。getJSON（“？”，函数（数据）{var siteContents=data.contents；//写入textarea document.myform.outputtext.value=siteContents；var start=siteContents.indexOf（“

”）；var end=siteContents.indexOf（“
”，start）；var code=siteContents.substring（start，end）；更新了答案以满足您的需要。非常感谢chris它解决了我的问题。您能告诉我如何获得位置价格和主题值吗？谢谢chris，但您上一次的JSFIDLE不包括位置和BD价格的更新。您可以添加它们吗。谢谢Rafaed谢谢，但如何将名为code的变量输入到您的？我的html sSource是名为code的内部变量！