使用JavaScript在字符串中突出显示单词的数据结构

我有根绳子

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."

我希望能够突出显示一些连贯的单词序列,并在悬停单词时显示工具提示。
数据结构将寻找什么?
我想应该是
id, wordIndexStart, wordIndexEnd, note
=======================================
1, 0, 5, Some note

为了突出前6个词,给我
洛雷姆·伊普索姆·多洛·西特·阿美,神圣的爱的精英。在Volvapat Iaculis(…)中实践Tristique精英
但是我如何返回这个字符串,以及这个突出显示的文本中的react或类似的内容呢?
通常,我会用
<p>{string}</p>

但我想应该是
<p>{string.split(" ").map(word => <span>{word}).join(" ")</p>

但我如何创建一个<span>周围,例如,6个第一个词?


最佳答案:

这个怎么样:

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>