用另一个 link 替换 link 的每个实例

Question

我正在从网站上抓取和修改内容。该网站包含我需要修复的损坏图像。我的 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"
    }
  }
]

我有图像 links，我想用 href link 替换 src link 的每个实例。所以最终结果看起来像这样。

[
  {
    "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"
    }
  }
]

我也有随机 links，它们与图像无关，只是 links，就像 post 1、2 和 4 中的那样。有什么办法可以做到这一点Javascript?

谢谢

Answer 1

考虑使用 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)

Answer 2

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, 'url');
});

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

用另一个 link 替换 link 的每个实例

replacing every instance of a link with another link

javascript

arrays

json

replace

web-scraping