How can I remove all characters after a specified word and before a period in a string using javascript?

Question

I have this string:

1_plex_light-blue-striped_imagegroup.jpg?v=1581100432

Sometimes it looks like this:

1_plex_light-blue-striped_imagegroup_d6f347cf-1440-45ef-955d-144ge18d0a00.jpg?v=1581100432

The string is made up of different bits that my code uses to help decide where and when to display the image.

• 1 (order in group of images)
• plex (product name)
• light-blue-striped (colour)
• imagegroup (let's my code know the image is part of a group

Code:

This code is inside a function that is triggered when a colour box is clicked. I pass in the colour of the box that was clicked, followed by the word "_imagegroup", and use the string to help be filter the images with the selected colour from the group of images I started out with.

    var imagesArray = makeProductImagesArray();

    function filterImageByColourAndGroupType(image) {
          return image.masterImagePath.includes(`${colour}_imageset.`);
    }

    var filteredArray = imagesArray.filter(filterImageByColourAndGroupType);

    filteredArray.sort((a, b) => a.masterImagePath.replace(/\D/g,'').localeCompare(b.masterImagePath.replace(/\D/g,'')));

Issue:

Sometimes the match fails because a random string like "d6f347cf-1440-45ef-955d-144ge18d0a00", is added to the image path.

How can I ensure that my filter only gives me back images that match this format:

light-blue-striped_imagegroup.

The filter needs to think the string that is added after "imagegroup" doesn't exist. It would see this:

1_plex_light-blue-striped_imagegroup.jpg?v=1581100432

And to totally ignore:

_d6f347cf-1440-45ef-955d-144ge18d0a00

Thanks in advance

Answer 1

You can use Lookbehind assertion to match for characters preceded by imagegroup:

 const str = '1_plex_light-blue-striped_imagegroup_d6f347cf-1440-45ef-955d-144ge18d0a00.jpg?v=1581100432'; console.log(str); const regex = "/(?<=imagegroup).*\\./" const newStr = str.replace(regex, '.'); console.log(newStr)

EDIT: Lookbehind assertion has a form of (?<=y)x and it matches "x" only if "x" is preceded by "y", to give simple example:

 const str = 'matchNOT but matchTHIS'; //this will look for anything containing the word 'match', //but only if it's preceded by the word 'but'; so 'match' before 'but' will be ignored // and 'match' after 'but' will be captured. const newStr = str.match(/(?<=but).*match.*/); console.log(newStr)

Answer 2

You could use a regex. Something like this would work:

function filterImageByColourAndGroupType(image) {
  const regex = new RegExp(`[0-9]+_.*_${colour}_imagegroup[_.*]?`);
  return image.masterImagePath.match(regex) != null;
}

This will match both 1_plex_light-blue-striped_imagegroup.jpg?v=1581100432 and 1_plex_light-blue-striped_imagegroup_d6f347cf-1440-45ef-955d-144ge18d0a00.jpg?v=1581100432 .

You might need to tweak the exact regex a bit based on the specific constraints of the values (which I don't know and am only guessing at here) but this should get you started.