javascript - 搜索过滤器不接受 "Round"作为一个值，因为 "Ground"是每个结果中的一个值

Question

我正在制作游泳池的照片库。搜索栏会更新每个输入字符的状态，类似于 Netflix 搜索栏。它会更新 JSON 文件中的所有键，类似于您在 Netflix 上搜索标题“Good Will Hunting”或 Actor “Matt Damon”的方式。

我遇到的问题是“round”将是一个常见的搜索词，会触发 JSON 中的“shape”:“round”。但另一个类别是“type”:“地上”或“type”:“地下”。

因此，如果您搜索圆形池，查询不会过滤为仅显示圆形池，因为“圆形”也会触发单词“地面”。它显示了圆形水池和任何触发“地上”或“地下”的水池的混杂。

我尝试过使用 .filter 和 .includes 方法，但没有成功。我不确定我是否遗漏了一些东西或什么。

我还将研究正则表达式，以便可能指示“如果搜索词“round”没有前面的字符，则显示圆形池并忽略地面触发器”。

import React, { Component } from "react";

class App extends Component {
  state = {
    filter: "",
    data: [
      {
        shape: "Round",
        type: "Above-ground"
      },
      {
        shape: "Rectangle",
        type: "In-ground"
      },
      {
        shape: "Kidney",
        type: "In-ground"
      }
    ]
  };

  handleChange = event => {
    this.setState({
      filter: event.target.value
    });
  };

  render() {
    const { filter, data } = this.state;
    const lowerCasedFilter = filter.toLowerCase();
    const filteredData = data.filter(item => {
      return Object.keys(item).some(key =>
        item[key].toLowerCase().includes(lowerCasedFilter)
      );
    });

    return (
      <div>
        <input value={filter} onChange={this.handleChange} />
        {filteredData.map(item => (
          <div>
            <p>Shape: {item.shape}</p>
            <p>Type: {item.type}</p>
            <hr />
          </div>
        ))}
      </div>
    );
  }
}

export default App;

我希望搜索过滤器在用户输入“round”时仅显示“round”池，并且不会因单词“ground”而显示多余的结果

Answer 1

您可以利用动态 RegExp，它使用单词边界 \b 进行“完整单词”匹配。

const lowerCasedFilter = filter.toLowerCase();
const filteredData = data.filter(item => {
  return Object.keys(item).some(key => {
    const stringToSearch = item[key].toLowerCase();
    const regex = new RegExp("\\b"+ lowerCasedFilter +"\\b"); // build regex around the given search term ("round" in your case)
    return regex.test(stringToSearch); // use "test" to see if your term is present in the property value
  });
});

本帖相关信息:whole word match in javascript .