How to create a Regex function that matches image alt text for two keys-CodePudding

I'm trying to match two values from an images alt text. There will be other text inside these alt as well that can be ignored.
The property will be either size or crop.

The alt tags would look like:

alt="size: 16 crop: mid crop"
alt="size: 16 crop: close crop"
alt="size: 16 crop: full body"
alt="size: 8 crop: mid crop"
alt="size: 8 crop: close crop"
alt="size: 8 crop: full body"
alt="size: 0 crop: mid crop"
alt="size: 0 crop: close crop"
alt="size: 0 crop: full body"

For size I'm trying to get "0" or "8" or "16" For crop I'm trying to get "full body" or "mid crop" or "close crop"

is this possible?

function getImageProperty(image, property) {
  const regex = new RegExp(`${property}: (. )[]]`, 'g');
  const matches = image.altText.match(regex);

  return matches && matches[1];
}

     /**
     * Returns a matching product image for provided size and crop.
     */
    const getMatchingImage = (images: size, crop) => {
      return images.find(
        (image) =>
          getImageProperty(image, size) && getImageProperty(image, crop),
      );
    };

CodePudding user response：

You could use this regex, which will match everything after the property name and up to either end-of-string or the next property name:

\bsize: (.*?)(?=\s\w :|$)

size would be replaced with whichever property name was appropriate.

images = document.querySelectorAll('img')

properties = ['size', 'crop']

function getImageProperty(image, property) {
  regex = new RegExp(`\\b${property}: (.*?)(?=\\s\\w :|$)`)
  matches = image.getAttribute('alt').match(regex)
  return matches && matches[1]
}

[...images].forEach((img, i) =>
  properties.forEach(prop => console.log(`image ${i} ${prop} = ${getImageProperty(img,prop)}`))
)

<img alt="size: 16 crop: mid crop" />
<img alt="crop: close crop size: 16" />
<img alt="size: 16 crop: full body" />
<img alt="crop: mid crop size: 8" />
<img alt="size: 8 crop: close crop" />
<img alt="size: 8 crop: full body" />
<img alt="size: 0 crop: mid crop" />
<img alt="size: 0 crop: close crop" />
<img alt="crop: full body size: 0" />

CodePudding user response：

The format "size: 16 crop: mid crop" is non-determanistic because there is no separator after the size value, such as "size: 16, crop: mid crop" would.

You can use a negative lookahead to work around this:

  const regex = new RegExp(`${property}: (\\w ( (?!crop:)\\w )?)`);

If you have control over the alt text and chose , as a separator you can change the regex to:

  const regex = new RegExp(`${property}: ([^,"] )`);

UPDATE:

Here is a working example with what appears to be your image object format:

function getImageProperty(image, property) {
  const regex = new RegExp(`${property}: ([^,"] )`);
  const matches = image.altText.match(regex);
  return matches && matches[1];
}

[
  'size: 16, crop: mid crop',
  'size: 16, crop: close crop',
  'size: 16, crop: full body',
  'size: 8, crop: mid crop',
  'size: 8, crop: close crop',
  'size: 8, crop: full body',
  'size: 0, crop: mid crop',
  'size: 0, crop: close crop',
  'size: 0, crop: full body'
].forEach(str => {
  let image = { altText: str };
  console.log(image.altText
      '\n=> size: '   getImageProperty(image, 'size')
      '\n=> crop: '   getImageProperty(image, 'crop')
  );
});