使用REGEX替换HTML字符串中的所有图像SRC属性

发布于 2025-02-02 13:22:35 字数 1717 浏览 3 评论 0原文

我有一个包含HTML代码的字符串，其中可能包含多个图像。我需要从字符串中提取所有图像引用，然后动态替换src属性。

我已经能够使用REGEX提取所有图像元素，对于每个已识别的图像元素，我可以解析name和src属性，但是我不确定如何要替换src属性，然后将其推回原始字符串。

// 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&amp;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&amp;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) ??? }
})

如何替换SRC属性，然后将更新的图像组件推回原始的HTML字符串（或转为修改的克隆HTML字符串）？

原文

I have a string containing HTML code which may contain multiple images. I need to extract all the image references from the string and dynamically replace the src attributes.

I have been able to extract all the image elements using regex, and for each identified image element I can parse the name and src attributes, but I'm not sure how to go about replacing the src attribute and then pushing it back in the original string.

// 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) ??? }
})

How can I replace the src attributes and push the updated image component back into the original html string (or into a modified cloned html string)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放飞的风筝 2025-02-09 13:22:35

就像评论中建议的@LMD一样，只需为此使用DOM即可。

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);

Like @LMD suggested in the comment, just use the DOM for this.

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);

回复收藏 0 原文

~没有更多了~