Javascript-форум - Js регулярные выражения

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Js регулярные выражения (https://javascript.ru/forum/misc/74469-js-regulyarnye-vyrazheniya.html)

Js регулярные выражения

Всех приветстую, подскажите пож-та в чем суть ошибки. Делаю combobox в react выполняю поиск регулярными выражениями, в файле json. Данные беру из onChange тэга input. Поиск выполняется успешно, но если будет пробел или два пробела, то нет. Если удаляю текст в input окне то выпадает весь список. В консоли e.target.value после удаления строки в input, через который беру значения для регулярного выражения вот такое : Ввожу "по" в input ( /по/gi/) а удаляю "по"

((? :)/gi)

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>

<body>

  <div  id="root">
    
  </div>

  
  
  <script type="text/babel">

    let arr = [".Дом.Земля.Вода.Ведро.Столб"];

    //Ищем данные в JSON      
     function getItems(items, value) {
      let regExp = new RegExp(value, "gi");
      let JSONparse = /\.+/g;//Деление каждого JSON
      let match;
      let arrayOfMatches = [];
      let getCities = []; 
      //JSON успешно спарсился
      while (match = JSONparse.exec(items)) {
           arrayOfMatches.push(match[0]);           
      }
        for(let el of arrayOfMatches){
          if (regExp.test(el)){
            getCities.push(el);          
            } 
          }
      
      
      return getCities;
      }

       function divSet(item) {     
          let list = item.map(a => 
            <li>{a}</li>
            );
          return <ul>{list}</ul>;
          }

      class Combobox extends React.Component{
      constructor(props) {
      super(props);
      this.state = {popular: null }; // ничего
      this.openHead = this.openHead.bind(this);
      this.closeHead = this.closeHead.bind(this); 
      this.handleChange = this.handleChange.bind(this);
    }

     openHead() {
          let popularItems = divSet(arr);
          this.setState({value: this.state.value,
           popular: popularItems});
      } 

     closeHead() {
        this.setState({value: this.state.value,
         popular: null});
      } 
    *!*
     handleChange(e) { // change input value
        let regExp = new RegExp(e.target.value, "ig");
        console.log(regExp);
        console.log(e.target.value);        
        let find = getItems(arr, regExp);
        let findCities = divSet(find);
        this.setState({popular: findCities});
      }
    */!*
    render() {
        return (
          <div>
              <input type="text" value={this.state.value} onClick={this.openHead} onBlur={this.closeHead} onChange={this.handleChange}  />
          <div>{this.state.popular}</div>
          </div>
       );
    }

  }


 ReactDOM.render(
    <Combobox  />,
    document.getElementById('root')
    )  
      
        

    
  
  </script>

</body>

</html>

Цитата:

Сообщение от VyacheslavBozere

str

что это?
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Исправил, посмотрите пож-та.

react find array

VyacheslavBozere,
ввести t

<html>
<head>
        <title></title>
        <style type="text/css">
        ul{
            list-style: none;
             margin: 0;
             padding: 0;
        }
        ul.span {
            color: red;
        }

        </style>
</head>
<body>
        <div id="root"></div>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
        <script type="text/babel">
let cities = "Toronto,Edmonton,Charlottetown".split(",");
let getItems = (cities, regExp) => cities.filter(e => regExp.test(e));
let divSet = (cities) => cities.map(city => <li>{city}</li>);
class Combobox extends React.Component{
 constructor(props) {
 super(props);
 this.state = {popular: divSet(["find city"]) };
this.handleChange = this.handleChange.bind(this);
 }


handleChange(e) {
 let str = e.target.value.trim();
 let find =  ["no find"];
 if(str) {
    let regExp = new RegExp(str, "ig");
    find = getItems(cities, regExp) || find;
 }
 let findCities = divSet(find)
 this.setState({popular: findCities});
 }

 render() {

 return (
 <div>
 <input type="text" onChange={this.handleChange} />
 <ul>{this.state.popular}</ul>
 </div>
 );
 }
 }
 ReactDOM.render(<Combobox />, document.getElementById('root'))

</script>

</body>
</html>

Понял, спасибо большое!