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

Question

[lexstile]

В доке нашел один вариант, но сами пишут - лучше не использовать, можно ли как-то иначе реализовать?
Заранее мы не знаем ,сколько совпадений, производительность тоже в приоритете.

dangerouslySetInnerHTML={{
                    __html: option.name.replace(searchRegExp, `<span class="${cn(s.inputDropdown__match)}">$1</span>`),
                  }}

Comments

[Kovalsky]

Опишите задачу полнее, возможно вообще можно обойтись без вставок HTML

[Алексей Уколов]

Что мешает хранить данные в state и выводить нормально, а не строкой?

[lexstile]

Kovalsky, Есть массив объектов вида:

const o = [
    {
      name: 'Москва',
      code: '01',
    },
    {
      name: 'Питер',
      code: '02',
    },
    // ..............
  ];

Пользователь вводит в инпут, например, "Мос"
Сначала делаю фильтр по всем элементам и отсекаю ненужные (по name)
Далее, хочу чтобы этот "Мос" при выводе имел отличный от основного цвет

[lexstile]

Алексей Уколов, пока не понял, как этого добираться.

[Kovalsky]

lexstile, может крутые парни скажут, что можно обойтись и без dangerouslySetInnerHTML, но мне кажется что он тут как раз в тему и нужен как раз для решения подобных проблем,

[Alex]

И при чем тут тег JS?

[lexstile]

Alex, потому что это реализуется на JS

[Alex]

lexstile, Ну, это прямо противоречит правилам сайта ¯\_(ツ)_/¯

[lexstile]

Alex, очень странные правила)

[Alex]

lexstile, Да нет. Вот я -- JavaScript разработчик. Я не знаком с реактом. И не подписан на него. Я могу как-то помочь с вашим вопросом? Нет.

[lexstile]

Alex, да, можете, split по разделителю (это будет поисковый запрос), дальше идем по массиву и в нужное место вставляем поисковый запрос.