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

【问题标题】：How to implement Regex filter in a React search bar?如何在 React 搜索栏中实现 Regex 过滤器？
【发布时间】：2018-09-29 15:09:34
【问题描述】：

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

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

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

这是 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;

【问题讨论】：

这可能会有所帮助：\bs*t*a*r*k*\b
@Sergio 请告诉我如何在代码中实现正则表达式。谢谢！
看起来你在谈论模糊/近似匹配，它比正则表达式搜索更高级一些。见en.wikipedia.org/wiki/Approximate_string_matching

标签： javascript regex reactjs regex-group

【解决方案1】：

以下是您将如何实施搜索的粗略概述。基本上，我们正在检查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>
        )
      })
    }

【讨论】：

【解决方案2】：

您过滤的数据：

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

【讨论】：

谢谢。但是你能支持我把这段代码放在哪里吗？
任何人都可以请支持我。我仍然坚持这一点。谢谢！