Data structure for highlights of words in a string with JavaScript

Question

I have a string

const string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique elit in volutpat iaculis. Proin a tincidunt turpis, et condimentum libero. Duis convallis nulla eu mattis porta. Nulla facilisi. Proin nec viverra orci. Nunc aliquam enim orci, ut dictum ipsum auctor ut. Quisque consectetur vestibulum tortor, mollis hendrerit velit hendrerit vel. In hac habitasse platea dictumst. Morbi volutpat lectus purus, eu sagittis odio viverra in. Phasellus vel volutpat felis. Proin a metus sit amet ipsum congue faucibus nec faucibus nisl. Aenean eu nisl ac velit dapibus vulputate non efficitur urna. Phasellus laoreet suscipit dictum. Curabitur sit amet justo at nisi dictum dapibus."

I want to be able to highlight some coherent sequence of words and show a tooltip when hovering the words.

What would the data structure look for this?

I guess it should be something like

id, wordIndexStart, wordIndexEnd, note
=======================================
1, 0, 5, Some note

in order to highlight the first 6 words, giving me something like

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique elit in volutpat iaculis (...)

but how do I return this string with this highlighted text in React or something similar?

Normally, I would print my text with

<p>{string}</p>

but I guess it should be something like

<p>{string.split(" ").map(word => <span>{word}).join(" ")</p>

but how do I create a <span> around, for instance, the 6 first words?

Answer 1

How about this:

const rules = {
  start: 0,
  end: 5,
  tooltip: "Some note"
};
const Highlight = ({ words }) => {
  const portion = words.split(" ").slice(rules.start, rules.end).join(" ");
  const rest = words.split(" ").slice(rules.end).join(" ");

  return (
    <span>
      <span className="highlight">{portion}</span>
      <span className="standard">{rest}</span>
    </span>
  );
};
const App = () => {
  const sentence = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique elit in volutpat iaculis.';
  
  return (
    <div>
      <Highlight words={sentence} />
     </div>
  )}
;

ReactDOM.render(<App />, document.getElementById("root"));

.highlight {
  font-weight: bold;
  color: red;
}

.standard {
  color: grey;
}

  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>