I am scraping HTML, and want to replace images in the articles with images I have hosted on my own infrastructure instead of hotlinking to the other website.
so lets say the article has the following html but with different image names on the page multiple times, and I have no idea of how many images there will be per page, so will have to be an array:
<img src="HXXP://domain.com/aaa/aaaa/aaa/123.jpg" alt="asd" style="width:100%">
<img src="HXXP://domain.com/aaa/aaaa/aaa/456.jpg" alt="asd" style="width:100%">
and I have extracted those images and uploaded them to my own host and now have a list of images with the following link, which will have the same files names, but different domains and urls
HXXP://example.com/bbb/bbbbb/bbbb/123.jpg
HXXP://example.com/bbb/bbbbb/bbbb/456.jpg
how to I replace the original links in the html with my own?
I'm thinking I'm going to need some mixture of for loop replace functionality. Does anyone have an example of this at all?
here is the below code fiddle for your answer, as you said you want to replace the article image with your own, you can fetch the all article images from js by query selector of getElemetsByTagName then you can loop through it and replace it from the array, here i assume order of article images are same as the images stored by your own
let myOwnImgs= ['HXXP://example.com/aaa/aaaa/aaa/789.jpg', 'HXXP://example.com/aaa/aaaa/aaa/101.jpg']
var shownImg = document.getElementsByTagName("img");
for(var i =0; i< shownImg.length; i++){
shownImg[i].src = myOwnImgs[i] // updating main image with array image
shownImg[i].alt = myOwnImgs[i].slice(-7) // for verifying
}<img src="HXXP://domain.com/aaa/aaaa/aaa/123.jpg" alt="123">
<img src="HXXP://domain.com/aaa/aaaa/aaa/456.jpg" alt="456">