Как использовать регулярное выражение для получения всех src URL в теге в JavaScript?

#javascript #regex

Вопрос:

У меня есть регулярное выражение для обработки HTML-строки фильтра с помощью JavaScript, я хочу получить все URL-изображения из src атрибута в <img> теге, но я хочу поддерживать как параметры, так < > и amp;< amp;> . Мой пример кода, как показано ниже:

 const filterImages = str => {
  const imgRegExp = /amp;(?:quot|[gl]t);img.*?src="(.*?)"[^>] >/g;
  const images = [];
    let img;
    while ((img = imgRegExp.exec(str))) {
      images.push(img[1]);
    }
  return images;
}

1. Итак, в чем же проблема? Добавьте < альтернативу, и все. Я не думаю, что вам нужно проверять строку после src атрибута.

2. Это возвращает пустой массив, если HTML-строка такая же, как: <img src=» url-image.com/image.jpg» >

Ответ №1:

Я придумал громоздкое регулярное выражение, подобное этому

 (?:<imgs src="(.*?)"[^.]*?/?>|amp;<imgs src="(.*?)"[^.]*?/?amp;>)

Я протестировал его на html-странице, и он кажется прекрасным
https://regex101.com/r/zifqle/1

Для удобства вы могли бы использовать именованные группы захвата, но, похоже, они должны быть уникальными, поэтому лучшее, что я могу придумать, — это

 (?:<imgs src="(?<url1>.*?)"[^.]*?/?>|amp;<imgs src="(?<url2>.*?)"[^.]*?/?amp;>)

Также попробуйте включить m флаг (многострочный) в регулярное выражение