React - Highlighting text inside of dangerouslySetHTML for given Xpath

Stuck for days with the following challenge:

The goal is to highlight several parts of a text that is rendered in a "dangerouslySetInnerHTML".

The text object that should be rendered includes the full html of the text content and an array of annotations, in which each annotation contains a string of the text part that should be highlighted and the X-Path (ranges).

{
 content: "<div><p>Hello world!</p><p>Another paragraph.</p></div>",
 annotations: [
   {ranges: [{start: '/p[1]', startOffset: 0, end: '/p[1]', endOffset: 12}]}
 ],
 quote: "Hello world!"
}

This is the simplified JSX:

render () {
    return (
      <div className="textcontainer">
       <p className="textcontent" dangerouslySetInnerHTML= />    
      </div>            
   )
  }

Is it possible to do this without jquery?

I found this answer on that topic Highlighting when HTML and Xpath is given

Though I couldn't make it work. Sorry, React JS newbie here. Thanks so much for helping out. Any help really appreciated.

from React - Highlighting text inside of dangerouslySetHTML for given Xpath