按字符对字符串数组进行排序并返回所有匹配的元素

Question

我有一个对象数组

var carList = [
    {
        car: "maruti",
        colors: ["red", "redish","yellow"]
    },
    {
        car: "ferrari",
        colors: ["purple", "red"]
    },
    {
        car: "Merc",
        colors: ["pink", "green"]
    }
];

现在我有一个输入搜索字段，用户可以在其中输入汽车的颜色。 因此，如果用户键入 red 则只应返回 maruti 和 ferrari 对象。 如果用户键入 reddish 则只应返回 maruti 对象。

我尝试使用嵌套过滤器

var textToSearch = "re";  
var test = carList.filter((x) => x.colors.filter((y)=> y.indexOf("textToSearch") > -1) );

即使搜索字符串只有 2 个字符，例如“re”，它也应该返回 maruti 和 ferrari 作为输出。

但这会返回所有对象，而不仅仅是 maruti 和 ferrari

注意：我希望它应该返回所有匹配的元素，而不仅仅是第一个匹配的元素。

Answer 1

在filter() 中使用includes() 和some() 来检查textToSearch 是否存在于colors 数组中：

var textToSearch = "r";
var test = carList.filter(x => x.colors.some(cl => cl.includes(textToSearch)));
console.log(test);

var carList = [{
    car: "maruti",
    colors: ["red", "redish", "yellow"]
  },
  {
    car: "ferrari",
    colors: ["purple", "red"]
  },
  {
    car: "Merc",
    colors: ["pink", "green"]
  }
];

var textToSearch = "re";
var test = carList.filter(x => x.colors.some(cl => cl.includes(textToSearch)));
console.log(test);

---

注意：您必须谨慎使用这种方法，因为re 匹配green！

---

根据评论：

var carList = [{
    car: "maruti",
    colors: ["red", "redish", "yellow"]
  },
  {
    car: "ferrari",
    colors: ["purple", "red"]
  },
  {
    car: "Merc",
    colors: ["pink", "green"]
  }
];

function getCars(event) {

  // Value of input field
  var value = event.target.name;
  
  // Sort carList
  var res = carList.filter(x => x.colors.some(cl => cl.includes(value)));
  
  // Show result to console
  console.log(res);
}

<input onclick="getCars(event);" name="red" type="checkbox">red</input>
<input onclick="getCars(event);" name="llow" type="checkbox">llow</input>

Answer 2

您可以使用过滤器和some。在filter 回调中使用一些来获取包含搜索到的颜色的颜色

var carList = [{
    car: "maruti",
    colors: ["red", "redish", "yellow"]
  },
  {
    car: "ferrari",
    colors: ["purple", "red"]
  },
  {
    car: "Merc",
    colors: ["pink", "green"]
  }
]

function getCar(color) {
  return carList.filter(item => item.colors.some(col => col.includes(color)))
}
console.log(' When it is red ', getCar('red'));
console.log('When it is redish', getCar('redish'));

Answer 3

两个问题：

1. 函数filter总是返回一个数组，即truthy值。
2. 变量textToSearch 有错字，用双引号括起来。

我建议您改用函数some 和函数includes。

let carList = [{    car: "maruti",    colors: ["red", "redish","yellow"]},{    car: "ferrari",    colors: ["purple", "red"]},{    car: "Merc",    colors: ["pink", "green"]}],
    textToSearch = "ed",
    fieldName = "colors",
    test = carList.filter((c) => c[fieldName].some(c => c.includes(textToSearch)));
    
console.log(test)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

var carList = [
    {
        car: "maruti",
        colors: ["red", "redish","yellow"]
    },
    {
        car: "ferrari",
        colors: ["purple", "red"]
    },
    {
        car: "Merc",
        colors: ["pink", "green"]
    }
];
var m = carList.filter((eachCar) => { 
    var colors = eachCar.colors;
    return colors.filter((eachColor) => {
           return eachColor.indexOf('in') !== -1
    }).length > 0;
});
                            
console.log(m);

Answer 5

我认为这是一个迟到的答案。但你可以关注我的regex 解决方案。

这里我使用RegExp.prototype.test() 方法，在Array.prototype.some() 和Array.prototype.filter() 的帮助下。

var carList = [{car: "maruti", colors: ["red", "redish","yellow"]}, {car: "ferrari", colors: ["purple", "red"]}, {car: "Merc", colors: ["pink", "green"]}];


const searchByColor = (list, keyword) => {
    // If you want the keyword must match from the beginning
    // const regex = new RegExp(`^${keyword}`, 'ig');
	
    // If you want the keyword matches anywhere of the string
    const regex = new RegExp(keyword, 'ig');
    return list.filter(({colors}) => colors.some(color => regex.test(color)));
}


console.log('For keyword "re":', searchByColor(carList, 're'));
console.log('For keyword "redish":', searchByColor(carList, 'redish'));

.as-console-wrapper {min-height: 100%!important; top: 0;}

注意：注意名为green 的颜色也有re 子字符串。尽可能多地获取相关搜索结果是件好事。

但是，如果您不想匹配字符串的任何位置，请使用注释的第一个正则表达式方法。那就是使用regex 作为：

const regex = new RegExp(`^${keyword}`, 'ig');