Extract alt from img inside sting

Question

I have a string that contains an <img>, I need to get the content of the "alt" attribute using regex

\<p\>this is text\<img src="https://storage.googleapis.com/staging-grapedata-task-helpful-resource-files-967a/e83759c9-85c8-4b22-b3b7-f3ab76d97f30/0c5185b7-0afd-4bca-882b-b23589fb3255_photo_2022-11-04_16-04-42.jpg%5C" alt="photo_2022-11-04_16-04-42" /\> and more text\</p\>

should return string

photo_2022-11-04_16-04-42

Answer 1

to capture the content of alt

(?<=alt=")[^"]*(?=")

Answer 2

Repair the HTML with a regex to remove the forward-slashes from the opening/closing tag (angle) brackets and then parse the HTML string.

After you have a document, you can query for the <img> and grab the alt attribute.

const str = '\<p\>this is text\<img src="https://storage.googleapis.com/staging-grapedata-task-helpful-resource-files-967a/e83759c9-85c8-4b22-b3b7-f3ab76d97f30/0c5185b7-0afd-4bca-882b-b23589fb3255_photo_2022-11-04_16-04-42.jpg%5C" alt="photo_2022-11-04_16-04-42" /\> and more text\</p\>';

const parseHtmlStr = (htmlStr) =>
  new DOMParser().parseFromString(htmlStr, 'text/html');

const
  parsed = parseHtmlStr(str.replace(/\\(?=[<>])/g, '')),
  imgAlt = parsed.querySelector('img').alt;

console.log(imgAlt); // photo_2022-11-04_16-04-42

This part is actually optional, but it does not hurt to do so:

str.replace(/\\(?=[<>])/g, '')

Answer 3

Use regex /alt=\"(.*)\"/. It will mach any character between quotation marks in alt attribute.

function getAltAttr(string) {
  var regex = /alt=\"(.*)\"/;
  var arr = regex.exec(string);
    
  return arr[1]; 
}

Then you can call function with your string value.