Реализация подсветки найденных значений в React?

Question

[AnatolyKS]

Всем привет, есть момент который не знаю как решить.

filteredMessages - отфлитрованный массив с объектами которые соответстуют поиску.

const filteredMessages = useMemo(() => {
    if (history) {
      return history.filter(item => item.text.toLocaleLowerCase().includes(findText?.toLowerCase().trim()));
    }
    return null;
  }, [findText, history]);

Далее маплю этот массив

<ul>
              {filteredMessages.map(message => (
                <li key={message.text + Math.random()}>
                  <span>{message.text}</span>
                </li>
              ))}
            </ul>

Вопрос: Как сделать что бы по мимо отображения нужных мне данных в мапе - при вводе символа(или слова) в инпут(поиск), если этот символ или слово встречаются - делать его подсветку.

Answer 1

[0xD34F]

https://jsfiddle.net/tjcaxn58/1/

Comments

[AnatolyKS]

Нашел немного другое решение - не подскажите, а как починить баг -
https://codesandbox.io/s/react-highlight-text-fork...

Если в инпут ввести знак ?, то код ломается в ошибке.

[0xD34F]

AnatolyKS, надо экранировать спецсимволы при создании регулярного выражения, вместо higlight передавайте в конструктор higlight.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&').