用另一個鏈接替換鏈接的每個實體-有解無憂

我正在從網站上抓取和修改內容。該網站包含我需要修復的損壞影像。我的 JSON 看起來像這樣

[
  {
    "post_title": "post 1",
    "post_link": "link 1",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <a href=\"somelink.com\">aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href=\"url1.jpg\"><img src=\"brokenURL1.jpg\" alt=\"\"></a><a href=\"url2.jpg\"><img src=\"brokenURL2.jpg\" alt=\"\"></a><a href=\"url3.jpg\"><img src=\"brokenURL3.jpg\" alt=\"\"></a><a href=\"url4.jpg\"><img src=\"brokenURL4.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 2",
    "post_link": "link 2",
    "post_date": "@1550725200",
    "post_content": [
      "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, <a href=\"somelink.com\">similique</a> sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.<a href=\"url5.jpg\"><img src=\"brokenURL5.jpg\" alt=\"\"></a><a href=\"url6.jpg\"><img src=\"brokenURL6.jpg\" alt=\"\"></a><a href=\"url7.jpg\"><img src=\"brokenURL7.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 3",
    "post_link": "link 3",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. <a href=\"url8.jpg\"><img src=\"brokenURL8.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 4",
    "post_link": "link 4",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis <a href=\"somelink.com\">doloribus asperiores repellat</a>.<a href=\"url9.jpg\"><img src=\"brokenURL9.jpg\" alt=\"\"></a><a href=\"url10.jpg\"><img src=\"brokenURL10.jpg\" alt=\"\"></a><a href=\"url11.jpg\"><img src=\"brokenURL11.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  }
]

我有影像鏈接，我想用 a href 鏈接替換 ??src 鏈接的每個實體。所以最終結果看起來像這樣。

[
  {
    "post_title": "post 1",
    "post_link": "link 1",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <a href=\"somelink.com\">aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href=\"url1.jpg\"><img src=\"url1.jpg\" alt=\"\"></a><a href=\"url2.jpg\"><img src=\"url2.jpg\" alt=\"\"></a><a href=\"url3.jpg\"><img src=\"url3.jpg\" alt=\"\"></a><a href=\"url4.jpg\"><img src=\"url4.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 2",
    "post_link": "link 2",
    "post_date": "@1550725200",
    "post_content": [
      "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, <a href=\"somelink.com\">similique</a> sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.<a href=\"url5.jpg\"><img src=\"url5.jpg\" alt=\"\"></a><a href=\"url6.jpg\"><img src=\"url6.jpg\" alt=\"\"></a><a href=\"url7.jpg\"><img src=\"url7.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 3",
    "post_link": "link 3",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. <a href=\"url8.jpg\"><img src=\"url8.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 4",
    "post_link": "link 4",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis <a href=\"somelink.com\">doloribus asperiores repellat</a>.<a href=\"url9.jpg\"><img src=\"url9.jpg\" alt=\"\"></a><a href=\"url10.jpg\"><img src=\"url10.jpg\" alt=\"\"></a><a href=\"url11.jpg\"><img src=\"url11.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  }
]

我也有與影像無關的隨機鏈接，只是像帖子 1、2 和 4 中的鏈接。有沒有辦法用 Javascript 做到這一點？

謝謝

uj5u.com熱心網友回復：

考慮使用該DOMParser實用程式從您的 html 字串創建檔案。然后，您可以使用典型的 DOM 方法（尤其是querySelectorAll）來查找相關元素，然后執行替換。

例如，類似：

const parser = new DOMParser();
const doc = parser.parseFromString(html_string_here, "text/html")
doc.querySelectorAll("a > img").forEach(img => img.setAttribute("src", img.parentElement.getAttribute("href")))

使用您的示例資料，您可以這樣撰寫：

顯示代碼片段

const example_data = [{
    "post_title": "post 1",
    "post_link": "link 1",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <a href=\"somelink.com\">aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href=\"url1.jpg\"><img src=\"brokenURL1.jpg\" alt=\"\"></a><a href=\"url2.jpg\"><img src=\"brokenURL2.jpg\" alt=\"\"></a><a href=\"url3.jpg\"><img src=\"brokenURL3.jpg\" alt=\"\"></a><a href=\"url4.jpg\"><img src=\"brokenURL4.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
  {
    "post_title": "post 2",
    "post_link": "link 2",
    "post_date": "@1550725200",
    "post_content": [
      "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, <a href=\"somelink.com\">similique</a> sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.<a href=\"url5.jpg\"><img src=\"brokenURL5.jpg\" alt=\"\"></a><a href=\"url6.jpg\"><img src=\"brokenURL6.jpg\" alt=\"\"></a><a href=\"url7.jpg\"><img src=\"brokenURL7.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
  {
    "post_title": "post 3",
    "post_link": "link 3",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. <a href=\"url8.jpg\"><img src=\"brokenURL8.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
  {
    "post_title": "post 4",
    "post_link": "link 4",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis <a href=\"somelink.com\">doloribus asperiores repellat</a>.<a href=\"url9.jpg\"><img src=\"brokenURL9.jpg\" alt=\"\"></a><a href=\"url10.jpg\"><img src=\"brokenURL10.jpg\" alt=\"\"></a><a href=\"url11.jpg\"><img src=\"brokenURL11.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  }
]

const parser = new DOMParser();

const fixed_links_data = example_data.map(item => {
  return {
    ...item,
    post_content: item.post_content.map(html => {
      const doc = parser.parseFromString(html, "text/html");
      doc.querySelectorAll("a > img").forEach(img => img.setAttribute("src", img.parentElement.getAttribute("href")));
      return doc.body.innerHTML;
    }),
  }
});

console.log("Final Result:", fixed_links_data)

uj5u.com熱心網友回復：

var arr = [
  {
    "post_title": "post 1",
    "post_link": "link 1",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <a href=\"somelink.com\">aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href=\"url1.jpg\"><img src=\"brokenURL1.jpg\" alt=\"\"></a><a href=\"url2.jpg\"><img src=\"brokenURL2.jpg\" alt=\"\"></a><a href=\"url3.jpg\"><img src=\"brokenURL3.jpg\" alt=\"\"></a><a href=\"url4.jpg\"><img src=\"brokenURL4.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 2",
    "post_link": "link 2",
    "post_date": "@1550725200",
    "post_content": [
      "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, <a href=\"somelink.com\">similique</a> sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.<a href=\"url5.jpg\"><img src=\"brokenURL5.jpg\" alt=\"\"></a><a href=\"url6.jpg\"><img src=\"brokenURL6.jpg\" alt=\"\"></a><a href=\"url7.jpg\"><img src=\"brokenURL7.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 3",
    "post_link": "link 3",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. <a href=\"url8.jpg\"><img src=\"brokenURL8.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  },
{
    "post_title": "post 4",
    "post_link": "link 4",
    "post_date": "@1550725200",
    "post_content": [
      "<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis <a href=\"somelink.com\">doloribus asperiores repellat</a>.<a href=\"url9.jpg\"><img src=\"brokenURL9.jpg\" alt=\"\"></a><a href=\"url10.jpg\"><img src=\"brokenURL10.jpg\" alt=\"\"></a><a href=\"url11.jpg\"><img src=\"brokenURL11.jpg\" alt=\"\"></a></p>"
    ],
    "custom": {
      "image": "thumbnail.jpg"
    }
  }
];

arr.forEach(function(item) {
    item.post_content[0] = item.post_content[0].replace(/(<img src=")([^] ?)(\d.jpg)/g, '$1url$3');
});

或使用https://www.npmjs.com/package/cheerio 處理

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/435545.html

標籤：javascript 数组 json 网页抓取代替

上一篇：如何使用python將json物件傳輸到excel檔案中？

下一篇：SwiftCodable：自定義行為的子類JSONDecoder