Javascript 字符串包括没有进一步匹配的完全匹配

Question

still learning JS and came across this issue that I was not fully sure how to approach so hopefully someone can help lead me in the direction. I have an array of product images each containing an alt string with the color referenced somewhere in it like this

let images = [
  {id:1, alt:"A Red Jacket"},
  {id:2, alt:"A Red Heather Jacket"},
  {id:3, alt:"Picture of Red Heather Awesome Jacket"} 
]

I also have an array of all possible colors (which I am not currently using in my logic) but have it available:

let colorOptions = ["Red", "Red Heather", "Blue", "Soft Red"]

I'm trying to check for each image in the images array if the alt text includes a given color, then create a color entry in that object with the given color.

ie. if "A Red Heather Jacket" string contains an instance of "Red Heather" then create a color: "Red Heather" entry in that object.

Where I am at

I have a working function where I am looping through the images array and using .includes() to check if there is a match in the alt string. It works for when the possible match color is two words (ie. "Red Heather" ) and matches those two words in the string, but when I use something like "Red" then it will match "Red" AND "Red Heather" . Im trying to figure out if there is any way I could get "Red" to just match "Red" and not other instances where red is mentioned in the longer color?

Below is the function that works for a possible match "Red Heather" but doesn't for "Red"

let images = [
  { id: 1, alt: "A Red Jacket" },
  { id: 2, alt: "A Red Heather Jacket" },
  { id: 3, alt: "A Red Heather Awesome Jacket" }
];

//not using the below array but think it could help
let colorOptions = ["Red", "Red Heather", "Blue"];

function findMatch(array, match) {
  for (var i = 0; i < array.length; i++) {
    if (array[i].alt.includes(match)) {
      array[i].color = match;
    }
  }

  return array;
}

let redHeather = findMatch(images, "Red");
console.log(redHeather);

Returns

[
  { id: 1, alt: "A Red Jacket" , color: "Red" },
  { id: 2, alt: "A Red Heather Jacket", color: "Red" },
  { id: 3, alt: "A Red Heather Awesome Jacket", color: "Red" }
]

Expected Result for findMatch(images, "Red")

[
  { id: 1, alt: "A Red Jacket" , color: "Red" },
  { id: 2, alt: "A Red Heather Jacket" },
  { id: 3, alt: "A Red Heather Awesome Jacket" }
]

Let me know if there are some other ways to approach this, I have thought of breaking it up into an array or using match() with regex but unsure where to go from here.

Answer 1

I also have an array of all possible colors (which I am not currently using in my logic) but have it available:

I think that's the problem. If some of the items there are substrings of other items, and you'd want only the other item to match if it exists in the input, then you need to include a check that the color you're looking for is the only one that exists in the input. Use .every to check that for every item in colorOptions , it's either the match argument, or it's not included in the alt :

 let images = [ { id: 1, alt: "A Red Jacket" }, { id: 2, alt: "A Red Heather Jacket" }, { id: 3, alt: "A Red Heather Awesome Jacket" } ]; let colorOptions = ["Red", "Red Heather", "Blue"]; function findMatch(array, match) { for (const item of array) { if ( item.alt.includes(match) && colorOptions.every(color => color === match || !item.alt.includes(color)) ) { item.color = match; } } return array; } let redHeather = findMatch(images, "Red"); console.log(redHeather);

If, like you mentioned, you want to use a regex, remove the match index in the array, then pass to new RegExp :

 let images = [ { id: 1, alt: "A Red Jacket" }, { id: 2, alt: "A Red Heather Jacket" }, { id: 3, alt: "A Red Heather Awesome Jacket" } ]; let colorOptions = ["Red", "Red Heather", "Blue"]; function findMatch(array, match) { const index = colorOptions.indexOf(match); const newArr = colorOptions.slice(0, index).concat(colorOptions.slice(index + 1)); const pattern = new RegExp(newArr.join('|')); for (const item of array) { if (item.alt.includes(match) && !pattern.test(item.alt)) { item.color = match; } } return array; } let redHeather = findMatch(images, "Red"); console.log(redHeather);

Answer 2

Maybe you want to do like:

 const images = [ { id: 1, alt: "A Red Jacket" }, { id: 2, alt: "A Red Heather Jacket" }, { id: 3, alt: "A Red Heather Awesome Jacket" } ]; function JacketMatcher(array){ // I now prefer constructors over classes since you can have private variables where you don't have to write `this.` on properties you don't want public anyways this.match = match=>{ const a = array.slice(), rx = new RegExp('^A\\\\s+'+match+'\\\\s+Jacket$'); for(let i=0,o,v,l=a.length; i<l; i++){ o = {}; v = a[i]; for(let k in v){ o[k] = v[k]; } if(o.alt.match(rx))o.color = match; a[i] = o; } return a; } } const jm = new JacketMatcher(images); const justRed = jm.match('Red'); console.log(justRed); const redHeather = jm.match('Red Heather'); console.log(redHeather);