I have a project where I fetch HTML code that may include img tags with src attribute that I need to change.

Example:

<div class="WordSection1"> 
<p class="MsoNormal">Hej, 
<o:p></o:p></p> 
<p class="MsoNormal"> 
<tr> 

<img border="0" width="160" height="36" style="width:1.6666in;height:.375in" id="Bildobjekt_x0020_5" src="https://api-na1.hubspot.com/filemanager/api/v2/files/65389630830/signed-url-redirect?portalId=457458" alt="IPM Ulricehamn" data-file-id="65389630830" data-original-src="cid:image001.jpg@01D818D5.2CBCEFF0">

</tr> 
<tr style="height:7.5pt"> 
<td style="padding:0cm 0cm 0cm 0cm;height:7.5pt"></td> 
</tr> 
</div>

In my code I use the html like this:

<p dangerouslySetHtml={{__html: HTML}} />

I need to access all img tags in the code to change the src due to hubspot API images is locked behind auth. I can authenticate from my server and get the image to upload to another host but I need to be able to change the src on all img tags, otherwise the img gets invalid because of auth.

I'm building the project in Next.JS