The while-loop using Regex adds only a single value to my array

Question

The while-loop using Regex adds only a single value to my array

Within my variable htmlContent, there lies a string filled with properly formatted HTML code, which includes various img tags.

The goal is to extract each value from the src attribute of these images and place them all in an array named srcList.

The issue I am encountering with the current code is that it consistently only displays an array consisting of one source value, contrary to my intentions of incorporating all the source URLs into the array instead of just one.

let srcList = [],
    imgSrc,
    regex = /<img.*src="(.*?)"/gi;

while ((imgSrc = regex.exec(htmlContent)) !== null) {
    srcList.push(imgSrc[1]);
}

alert(JSON.stringify(srcList));

How can I adjust this code to function as desired?

javascript regex typescript

Answer 1

Answer №1

Your regular expression with the greedy match between img and src is capturing everything from the first occurrence of img to the last occurrence of src, which means it will only grab the last image source. You can modify the regex to capture within each individual <img> tag for better results.

Here's an example using a modified regex pattern that accounts for single-line HTML strings:

let srcList = [],
  imgSrc,
  regex = /<img[^>]*src="(.*?)"/gi;

let htmlContent = '<img src="foo"><img class="bat" src="bar"><img src="baz">';

while (imgSrc = regex.exec(htmlContent)) {
  srcList.push(imgSrc[1]);
}

console.log(srcList);

(It's important to keep in mind the cautionary reminder "don't try to parse HTML with regular expressions" when dealing with complex HTML structures. Consider utilizing jQuery methods like

$('img').each(function() {srcList.push($(this).attr('src'))}

as an alternative approach.)

Answer 2

Your regular expression with the greedy match between img and src is capturing everything from the first occurrence of img to the last occurrence of src, which means it will only grab the last image source. You can modify the regex to capture within each individual <img> tag for better results.

Here's an example using a modified regex pattern that accounts for single-line HTML strings:

let srcList = [],
  imgSrc,
  regex = /<img[^>]*src="(.*?)"/gi;

let htmlContent = '<img src="foo"><img class="bat" src="bar"><img src="baz">';

while (imgSrc = regex.exec(htmlContent)) {
  srcList.push(imgSrc[1]);
}

console.log(srcList);

(It's important to keep in mind the cautionary reminder "don't try to parse HTML with regular expressions" when dealing with complex HTML structures. Consider utilizing jQuery methods like

$('img').each(function() {srcList.push($(this).attr('src'))}

as an alternative approach.)

The while-loop using Regex adds only a single value to my array

Answer №1

Similar questions

Top method for achieving a smooth transition in a loading CSS3 animation

Establishing a minimum date based on the date selected in the earlier datepicker

Easy steps to bring in type definitions from an npm package using Vite

Sending a multi-level property object to the controller in a post request

Developing a Data Generic State Management System in Angular using TypeScript

Utilizing TypeScript's conditional return type with an object as a parameter, and incorporating default values

Establishing headers in hapi.js

Error: Trying to modify an immutable property 'title' of object '#<Object>' - React JS and Typescript

Guide: Enhancing Query Context within jQuery Instances Spanning Across Iframes

Adjusting the width of innerHtml within a React router link to match the parent element's width

Tips for effectively utilizing URLSearchParams in Angular 5 HttpClient's "get" function

From Ruby to Javascript: Solving the Challenges of Date Calculation

Issues with previewing PDF files in AngularJS

Tips for extracting a value from a mongodb aggregate operation

What is the best way to resize a PDF to match the width and height of a canvas using

The CSS Bootstrap 4 class 'input-group-append' is not functioning properly. Just recently, the styles were displaying correctly

Is there a way to create a type interface that points to the structure of another type?

Refreshing an Angular datatable using promises - reload directive

Tips on Avoiding Initial Click Activation

Using Angular Ionic for a click event that is triggered by a specific class