使用 RegEx 提取 HTML 元素的属性

Question

I'm working on some image deferring and am looking for a way to remove the src element. I have a specific use case where I need to use regex so I can render the result server-side and stop the src from loading, until I tell it to in JS.

Basically I need a way to reliably replace just the src in an image tag. Not the value, but the actual property name.

As of right now, I was testing something along the lines of:

<img[^>]+src\\s*=\\s*['"]([^'"]+)['"][^>]*> .

Which given my example text, finds the whole string <img src="aaaa" /> . I basically need it to only highlight the src . That way I can regex_replace on it to change src to data-deferred .

Example Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum lorem bibendum lectus rhoncus molestie. <img src ="aaaa" /> Maecenas ipsum justo, fermentum nec lacus in, porta consectetur metus.

Here is my Regex101: https://regex101.com/r/RATGgw/1/

Since I don't always have access to the HTML I'm going to have to parse, I can't just target src . I need to make sure it's only src when found anywhere within an image tag.

Any idea how I could modify this to accomplish this?

Edit:

For clarification, the question, how can I use RegEx to be able to find only the src property within an image tag.

So my found result would allow me to replace src="https://" with a custom data-attribute like data-deferred="https://" .

Answer 1

You can replace the src property with a data-deferred property by using capturing groups (parentheses) in your regex like this:

 // [ $1 ][$2 ][?= a lookahead (no capture) ][global - replace all] var regex = /(<img[^>]+)(src)(?=\\s*=\\s*['"][^'"]+['"][^>]*>)/g; var text = 'Lorem ipsum. <img alt="foo" src ="aaaa" title="bar" /> Maecenas metus.'; var result = text.replace(regex, '$1data-deferred'); console.log(result); // Lorem ipsum. <img alt="foo" data-deferred ="aaaa" title="bar" /> Maecenas metus.

Answer 2

You want to use jQuery for things like this:

$('img[data-deferred]').each(function(i, img){
  $(img).attr('src', $(img).attr('data-deferred'))
})