Извлечение свойства элемента HTML с использованием RegEx

Question

Я работаю над отложением изображения и ищу способ удалить элемент sr c. У меня есть определенный c сценарий использования, где мне нужно использовать регулярное выражение, чтобы я мог обработать результат на стороне сервера и остановить загрузку sr c, пока я не сообщу об этом в JS.

По сути, мне нужен способ надежной замены только src в теге изображения. Не значение, а фактическое имя свойства.

На данный момент я тестировал что-то вроде:

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

Который дал мой пример текст, находит всю строку <img src="aaaa" />. Мне в основном это нужно, чтобы выделить только src. Таким образом, я могу regex_replace изменить его, чтобы изменить src на data-deferred.

Пример текста

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.

Вот мой Regex101: https://regex101.com/r/RATGgw/1/

Поскольку у меня не всегда есть доступ к HTML, который мне придется анализировать, я не могу просто нацелиться на src. Мне нужно убедиться, что это только src, когда он найден где-либо внутри тега изображения.

Есть идеи, как я могу изменить это, чтобы выполнить sh это?

Редактировать:

Для пояснения, вопрос, как я могу использовать RegEx, чтобы иметь возможность найти только свойство src в теге изображения.

Так что мой найденный результат позволил бы мне заменить src="https://" на пользовательский атрибут данных типа data-deferred="https://".

Answer 1

Вы можете заменить свойство src на свойство data-deferred, используя группы захвата (круглые скобки) в вашем регулярном выражении, например:

//           [    $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

Вы хотите использовать jQuery для таких вещей:

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