Javascript 如何在React搜索栏中实现正则表达式过滤器？

我一直在尝试在我的React项目中实现一个正则表达式过滤器——它是一个搜索栏，我甚至要过滤单词中的混合字母

如果我用“斯塔克”作为单词或“卡斯塔克”，一旦我输入“stk”，单词“斯塔克”就会出现

我已经可以搜索“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;

这是搜索文件

[
    {
          "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;

import React，{Component}来自'React'；
const data=require（'../../data.json'）；
函数搜索（术语）{
返回函数（x）{
返回x.title.toLowerCase（）。包括（term.toLowerCase（））| |！term；
}
}
类结果扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
数据：数据，
术语：“”，
}
this.searchHandler=this.searchHandler.bind（this）；
}
searchHandler（事件）{
this.setState（{term:event.target.value}）
}
渲染（）{
const{term，data}=this.state；
返回(
诺塔斯
{
data.filter（搜索（术语））.map（（元素，索引）=>{
返回(
{element.title}
{element.date}
)
})
}
)
}
}
导出默认结果；

您的筛选数据：

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

---

下面是如何实现搜索的大致概述。基本上，我们正在检查

项。title

是否包含

项

，如果包含，则过滤掉所有其他内容并映射数据

    {
      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>
        )
      })
    }

{
data.filter（item=>item.title.toLowerCase（）.includes（term.toLowerCase（））.map（（元素，索引）=>{
返回(
{element.title}
{element.date}
)
})
}

这可能会有帮助：@Sergio请你告诉我如何在代码中实现正则表达式。谢谢！看起来你在谈论模糊/近似匹配，这比正则表达式搜索更高级。谢谢。但是你能支持我将代码放在何处吗？任何人都可以支持我。我仍然是我坚持住了，谢谢！