-1

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://".

knocked loose
  • 3,142
  • 2
  • 25
  • 46

2 Answers2

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.
blex
  • 24,941
  • 5
  • 39
  • 72
  • I know my wording may have been confusing, but I am unable to match just the text "src". As in, I want to basically turn `src="aaaa"` into `data-deferred="aaaa"`. Basically replacing my src property for a custom data attribute. – knocked loose Feb 24 '20 at 21:50
  • Oh ok, sorry I did not understand at first. Updated my answer, is that what you mean? – blex Feb 24 '20 at 21:56
  • Yup basically what I'm looking for. Just out of curiosity, is that regex cascading, as in it finds the full, then splits to groups? Is there a way to only find the src group? – knocked loose Feb 24 '20 at 21:59
  • 1
    Well, I found _some_ improvements: no capturing group for the end part, using a lookahead, and no more use of a callback function for the replacement. There might be a way to remove the first capturing group, but I couldn't find one that worked. [This might be the answer](https://stackoverflow.com/a/57450029/1913729) but it just freezes my Chrome – blex Feb 24 '20 at 22:21
  • Oh, and I added a `g` flag (global) in case you want to replace multiple occurrences – blex Feb 24 '20 at 22:24
  • Hmm, this is such a weird problem lol. No worries though, that looks like the right track! Appreciate all the help :) – knocked loose Feb 24 '20 at 22:28
0

You want to use jQuery for things like this:

$('img[data-deferred]').each(function(i, img){
  $(img).attr('src', $(img).attr('data-deferred'))
})
pguardiario
  • 53,827
  • 19
  • 119
  • 159
  • Given my constraints, I'm trying to accomplish this server side and only have access to Jinja2, but their regex-replacement options are kind of lacking. I want the src stripped far when it renders, not after the dom is ready. – knocked loose Feb 25 '20 at 13:53