如何在 html 字符串中提取 class div 中的图像源

Question

I have regular expression for extracting the source of images in html string, that works fine. The output is in urls array:

var m,
urls = [],
str = '<img class="d-block mx-auto" src="http://www.website.com/wp-content/uploads/2020/05/66189-759x493.jpg" />,
rex = /<img[^>]+src="?([^"\s]+)"?\s*\alt="First slide">/g;
      while ( m = rex.exec( str ) ) {
          urls.push( m[1] );
      }
console.log(urls);  // ["http://www.website.com/wp-content/uploads/2020/05/66189-759x493.jpg",...]

However I want rex that gets only the source of images inside class carousel-item:

str = '<div class="carousel-item"> <img class="d-block mx-auto" src="http://www.website.com/wp-content/uploads/2020/05/66189-759x493.jpg" />';

Answer 1

I would skip the regular expression and use DOM methods to get to the content you want.

Using template or DomParser and querySelector

 var str = '<div class="carousel-item"> <img class="d-block mx-auto" src="http://www.website.com/wp-content/uploads/2020/05/66189-759x493.jpg" /></div>'; var temp = document.createElement("template"); temp.innerHTML = str console.log(Array.from(temp.content.querySelectorAll(".carousel-item img")).map(x => x.src)) var doc = new DOMParser().parseFromString(str, "text/html") console.log(Array.from(doc.querySelectorAll(".carousel-item img")).map(x => x.src))