如何使用javascript從html字符串中提取所有圖像網址和href值？

Question

我有一個包含多組列表項的HTML字符串。 我想從<li></li>集中提取圖像URL和對應的href值，並將這些值用作變量以供日后使用。

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

<li></li>集的示例：

 <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>

Answer 1

如果您正在使用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”屬性與之關聯。

有關它的一個示例，請參閱此jsFiddle 。

---

基於評論更新

看到這個jsFiddle示例。 關鍵的變化是尋找你傳遞它的“li”$ .parseHTML（siteContents）;

Answer 2

如果你正在使用jQuery，這將有所幫助，並將組織起來。 我用parseHTML更新了。

//而不是每次使用，總是考慮使用，會更快。

    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);

看到這個jsFiddle

干杯!