How to implement the selection of the found fragment?

Question

React

For example, here - https://enkidevs.github.io/react-search-input/
It is necessary that the search phrase in the found elements be wrapped in a tag <span>{searchTerm}</span>, for example:

Answer 1

Working example (jsfiddle)
The main logic is in the SearchResults component:

class SearchResults  extends React.PureComponent {

  render() {
  const { target, results } = this.props

  	return (
    	<div className="SearchResults">
    	  {_
        	.chain(results)
        	.map(word => word.split(target))
                .map(parts => _.reduce(
              	  parts,
                  (res, part) => res.length > 0
                   ? [ ...res, <span className="highlight">{target}</span>, part ]
                   : [ part ]
          	  ,
                  []
        	))
                .map(word => <span className="word">{word}</span>)
                .value()
          }
    	</div>
    )
  }
}

We split the words into an array (example 'Mathieu'.split('th') => ['Ma', 'eu'])
Then we collect them back, while to the left of each "piece" of the word we insert our separator (what you need highlight with color), wrapping it in a span along the way:

.map(parts => _.reduce(
  parts,
  (res, part) => res.length > 0
    ? [ ...res, <span className="highlight">{target}</span>, part ]
    : [ part ]
  ,
  []
))

Well, then we wrap the resulting array in a span, which will be a container for the word (search result):
.map(word => <span className="word">{word}</span>)