JAVASCRIPT
Extract All Image `src` Attributes from HTML String
Efficiently extract all `src` attribute values from `<img>` tags within an HTML string using a simple JavaScript regex, useful for content processing.
const htmlString = '<p>Some text</p><img src="image1.jpg" alt="Alt 1"><p>More text</p><img src="/images/image2.png" data-id="123">';
const imgSrcRegex = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/gi;
let match;
const srcArray = [];
while ((match = imgSrcRegex.exec(htmlString)) !== null) {
srcArray.push(match[1]);
}
console.log(srcArray); // ['image1.jpg', '/images/image2.png']
How it works: This regex is designed to find all `src` attributes within `<img>` tags in an HTML string. The `g` flag ensures all matches are found, and the `i` flag makes it case-insensitive. `[^>]+` matches any character except `>` one or more times, to capture attributes between `<img` and `src`. `src\s*=\s*` matches 'src=' with optional whitespace. `['"]([^'"]+)['"]` captures the URL inside single or double quotes. The parentheses `()` create a capturing group for the `src` value, which is then extracted using `match[1]` in the loop.