Question

我一直在尝试在我的React项目中实现一个Regex过滤器 - 它是一个搜索栏，我必须过滤一个单词中的混合字母。

例如。如果我将“Stark”作为单词或“Karstark”，一旦我输入“stk”，就会出现“Stark”这个词。

如果我输入“ark”代表“Stark”或“ol”代表“Bolton”，我已经可以搜索了

这是Json文件

[
    {
          "id" : 1,
          "title": "Stark",
          "date": "17-08-2017"
    },
    {    
          "id" : 2,
          "title": "Lannister",
          "date": "17-08-2017"
    },
    {
          "id" : 3,
          "title": "Targaryen",
          "date": "16-08-2017"
    },
    {
          "id" : 4,
          "title": "Karstark",
          "date": "16-08-2017"
    },
    {
          "id" : 5,
          "title": "Bolton",
          "date": "15-08-2017"
    },
    {
          "id" : 6,
          "title": "Martell",
          "date": "15-08-2017"
    }

]

这是搜索文件

import React, { Component } from 'react';
const data = require('../../data.json');


function searchingFor(term){
    return function(x){
            return x.title.toLowerCase().includes(term.toLowerCase()) || !term ;

    }
}



class Results extends Component {
    constructor(props){
        super(props);

            this.state = {
                    data: data ,
                    term : '',
            }
            this.searchHandler = this.searchHandler.bind(this);
    }

    searchHandler(event){
        this.setState({ term: event.target.value})
    }

  render () {
        const {term, data} = this.state;
        return (
        <section>
                    <div className="input-group input-group-lg" >
                        <input type="text" 
                        className="form-control" 
                        aria-label="Large" 
                        placeholder="Pesquise uma nota" 
                        aria-describedby="inputGroup-sizing-sm" 
                        onChange={this.searchHandler}
                        value={term}
                         />
                    </div>
                    <div className="App-maintitle">
                        <h1>Notas</h1>
                    </div>
        {
          data.filter(searchingFor(term)).map((element, index) => {
          return (
            <div className="App-row" key={index} >
              <div className="App-titledata">
                {element.title}
              </div>
              <div className="App-date">
                {element.date}
              </div>
            </div>
            )
          })
        }
        </section>     
    )
  }
}

export default Results;

Answer 1

您的过滤数据：

data.filter(item => {
  return term.split("").every(internalItem => {
    return item.title.toLowerCase().indexOf(internalItem.toLowerCase()) !== -1
  })
})

Answer 2

以下是有关如何实现搜索的粗略概述。基本上，我们正在检查item.title是否包含term，如果包含，则过滤掉所有其他内容并映射数据。

    {
      data.filter(item => item.title.toLowerCase().includes(term.toLowerCase()).map((element, index) => {
      return (
        <div className="App-row" key={index} >
          <div className="App-titledata">
            {element.title}
          </div>
          <div className="App-date">
            {element.date}
          </div>
        </div>
        )
      })
    }

如何在React搜索栏中实现Regex过滤器？

2 个答案: