Tengo una cadena que contiene código HTML que puede contener varias imágenes. Necesito extraer todas las referencias de imágenes de la cadena y reemplazar dinámicamente los atributos src .
He podido extraer todos los elementos de la imagen usando expresiones regulares, y para cada elemento de la imagen identificado puedo analizar el name y los atributos src , pero no estoy seguro de cómo reemplazar el atributo src y luego devolverlo al original cuerda.
// Define html string with images const htmlString = `<p>Here's an image of people:</p><p><br></p><img class="projectImage" src="http://localhost:9199/v0/b/myApp-test.appspot.com/o/images%2Fprojects%2FbqIFfaNFV8SqO3rn0GRH%2Fdraft%2Fpeople-3137672_1920.jpeg?alt=media&token=1369544e-abd0-4b53-a37a-bf325013dcb7" name="people-3137672_1920.jpeg"><p><br></p><p><br></p><p>and here's an image of some dogs:</p><p><br></p><img class="projectImage" src="http://localhost:9199/v0/b/myApp-test.appspot.com/o/images%2Fprojects%2FbqIFfaNFV8SqO3rn0GRH%2Fdraft%2Fdogs.webp?alt=media&token=1c93469a-0537-4a43-9387-13f0bf8d64c9" name="dogs.webp"><p><br></p>` // Generate list of images const imageElements = htmlString.match(/<img[\w\W]+?\/?>/g) console.log(`found ${imageElements.length} image element(s):`) // For each image identify the name and src attributes imageElements.forEach(imageElement => { const regex = /<img[^>]*?src=["\']?((?:.(?!\1|>))*.?)"([^"]*).*name=["\']?((?:.(?!\1|>))*.?)"([^"]*)/ const match = regex.exec(imageElement) const src = match[2] const name = match[4] console.log({ name, src }) // if(name === 'dogs.web') { replaceSrc('https://newLink.com) ??? } })¿Cómo puedo reemplazar los atributos src y devolver el componente de imagen actualizado a la cadena html original (o a una cadena html clonada modificada)?
Como @LMD sugirió en el comentario, solo use el DOM para esto.
let el = document.createElement('div'); el.innerHTML = `<p>Here's an image of people:</p><p><br></p><img class="projectImage" src="http://localhost:9199/v0/b/myApp-test.appspot.com/o/images%2Fprojects%2FbqIFfaNFV8SqO3rn0GRH%2Fdraft%2Fpeople-3137672_1920.jpeg?alt=media&token=1369544e-abd0-4b53-a37a-bf325013dcb7" name="people-3137672_1920.jpeg"><p><br></p><p><br></p><p>and here's an image of some dogs:</p><p><br></p><img class="projectImage" src="http://localhost:9199/v0/b/myApp-test.appspot.com/o/images%2Fprojects%2FbqIFfaNFV8SqO3rn0GRH%2Fdraft%2Fdogs.webp?alt=media&token=1c93469a-0537-4a43-9387-13f0bf8d64c9" name="dogs.webp"><p><br></p>` el.querySelectorAll('img').forEach((imgEl) => { imgEl.src = 'my.newSource.com/img/1'; }); console.log(el.innerHTML);