Как применить выделение символов совпадения в списке автозаполнения в Reactjs?

Вам нужно отобразить выделенный текст в виде простого html, вы можете получить этот образец

 safeHTML(item) {
   return item.replace(new RegExp(this.state.selectedText, 'gi'),'<strong>$&</strong>')
  }

  getHighlighted(item){
     return (
      <p key = {item}
        dangerouslySetInnerHTML = {{
          __html : this.safeHTML(item)
        }} />
    )
  }

  render() {
    return <div>
      {
        this.state.suggestions.map(s => {
          return this.getHighlighted(s)
        })
      }
    </div>;
  }

PS: вам нужны очищенные данные для безопасности

Надеюсь, это поможет :)

У вас есть 2 проблемы, которые необходимо решить: (1) извлечь соответствующую подстроку в suggestions и (2) выделить соответствующую подстроку в пользовательском интерфейсе.

Вы можете использовать String.prototype.split вместо RegExp.prototype.test, чтобы разделить строку с помощью соответствующего регулярного выражения и подготовить необходимые данные для рендеринга:

onTextChange = (e) => {
    const value = e.target.value;
    let suggestions = [];
    if (value.length > 0) {
        const regex = new RegExp(`${value}`, 'i');
        suggestions = this.items.sort().map(v => {
            const arr = v.split(regex);
            return arr.map(substr => ({
                value: substr,
                isMatched: regex.test(substr)
            }))
        });
        suggestions = suggestions.filter(arr => arr.some(({ isMatched}) => isMatched))

        this.setState(() => ({ suggestions, textValue: value }));
     }
    this.setState(() => ({ suggestions, textValue: value }));

   }

затем распечатайте список предложений:

   renderSuggestions () {
     const {suggestions} = this.state;
     if (suggestions.length !== 0) {

     return(
        <div className = "auto-suggestions">
            <ul>
            {suggestions.map((item) =>
                <li key = {item} className = "suggestion-item" onClick = {()=> 
                    this.suggestionSelected(item)}>
                    {item.map(({ value, isMatched}) => 
                        {isMatched ?
                            <span>{value}</span> :
                            <strong>{value}</strong>
                        }
                    )}
               </li>)}
             </ul>
          </div>
        );
       }
      }