Как сделать хайлайт слов в ReactJs?

Question

[Игорь Шумиловский]

Всем привет! У меня есть массив названий и есть поле поиска, по тексту из которого должны искаться слова из массива и хайлайтиться, если они начинаются с введенного текста.

Т.е. если мы ввели javascript isn't awesome, то строка my javascript isn't awesome, sorry превратится в my javascript isn't awesome, sorry.

Как можно сделать такое в Реакте? Да и в принципе, на джаваскрипте?

Забыл добавить. В строке могут быть всякие разные символы в духе (, ., ;, ) и т.д

Answer 1

[Ninja Mate]

Как вам такая идейка экспромт)
в поле ввода value задаем из стейта, который собираем из
<span>this.props.hlt</span> + this.props.else
onChange при вводе прогоняем через array и если есть совпадение, то задаем this.props.hlt , если нет то this.props.else, когда this.props.else совпадает со значением array то обнуляем его и задаем в this.props.hlt

Comments

[Игорь Шумиловский]

А если совпадения будут в середине строки?

[Ninja Mate]

Игорь Шумиловский: ну такой стейт конструктор сделать и в него запихивать по слову или по фразе. можно проверку делать на onChange и в стейт запихивать новое слово с span в начале и /span в конце, тогда стейт не обнулять а

this.setState({ phrase : this.state.phrase + this.state.word })

Answer 2

[RubaXa]

Используйте https://facebook.github.io/react/tips/dangerously-...