Оберните несколько строк в HTML способом React

вы пробовали что-то подобное?

сложность-это количество абзацев * количество ключевых слов. Для абзаца из 22 273 слов (121 104 символов) и 3 ключевых слов требуется 44 МС на моем ПК для генерации массива.

!!! ОБНОВЛЕНИЕ: Я думаю, что это лучшее и efficientest способ, чтобы выделить ключевые слова. Я использовал ответ Джеймса Брайерли, чтобы оптимизировать его.

Я тестировал на 320kb данных с 500 ключевыми словами, и он загружается довольно медленно. Еще одна идея будет придавать пунктам прогрессивный характер. Визуализируйте первые 10 абзацев, а после этого, при прокрутке или через некоторое время, визуализируйте остальные.

и JS возиться с вашим примером:https://jsfiddle.net/69z2wepo/79047/

const Term = ({ children }) => (
  <em style={{backgroundColor: "red"}} onClick={() => alert(children)}>
    {children}
  </em>
);

const Paragraph = ({ paragraph, keywords }) => {
  let keyCount = 0;
  console.time("Measure paragraph");

  let myregex = keywords.join('\b|\b');
  let splits = paragraph.split(new RegExp(`\b${myregex}\b`, 'ig'));
  let matches = paragraph.match(new RegExp(`\b${myregex}\b`, 'ig'));
  let result = [];

  for (let i = 0; i < splits.length; ++i) {
    result.push(splits[i]);
    if (i < splits.length - 1)
      result.push(<Term key={++keyCount}>{matches[i]}</Term>);
  }

  console.timeEnd("Measure paragraph");

  return (
    <p>{result}</p>
  );
};


const FormattedText = ({ paragraphs, keywords }) => {
    console.time("Measure");

    const result = paragraphs.map((paragraph, index) =>
      <Paragraph key={index} paragraph={paragraph} keywords={keywords} /> );

    console.timeEnd("Measure");
    return (
      <div>
        {result}
      </div>
    );
};

const paragraphs = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare tellus scelerisque nunc feugiat, sed posuere enim congue. Vestibulum efficitur, erat sit amet aliquam lacinia, urna lorem vehicula lectus, sit amet ullamcorper ex metus vitae mi. Sed ullamcorper varius congue. Morbi sollicitudin est magna. Pellentesque sodales interdum convallis. Vivamus urna lectus, porta eget elit in, laoreet feugiat augue. Quisque dignissim sed sapien quis sollicitudin. Curabitur vehicula, ex eu tincidunt condimentum, sapien elit consequat enim, at suscipit massa velit quis nibh. Suspendisse et ipsum in sem fermentum gravida. Nulla facilisi. Vestibulum nisl augue, efficitur sit amet dapibus nec, convallis nec velit. Nunc accumsan odio eu elit pretium, quis consectetur lacus varius"];
const keywords = ["Lorem Ipsum"];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      limitParagraphs: 10
    };
  }

  componentDidMount() {
    setTimeout(
      () =>
        this.setState({
          limitParagraphs: 200
        }),
      1000
    );
  }

  render() {
    return (
      <FormattedText paragraphs={paragraphs.slice(0, this.state.limitParagraphs)} keywords={keywords} />
    );
  }
}

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

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<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>

<div id="root">
</div>

первое, что я сделал, это разделил абзац на массив слов.

const words = paragraph.split( ' ' );

затем я сопоставил массив слов с кучей <span> теги. Это позволяет мне прикрепить onDoubleClick мероприятия к каждому слову.

return (
  <div>
    {
      words.map( ( word ) => {
        return (
          <span key={ uuid() }
                onDoubleClick={ () => this.highlightSelected() }>
                {
                  this.checkHighlighted( word ) ?
                  <em>{ word } </em>
                  :
                  <span>{ word } </span>
                }
          </span>
        )
      })
    }
  </div>
);

поэтому, если слово дважды щелкнуло, я увольняю this.highlightSelected() функция, а затем, как я условно отображаю слово, основанное на том, выделено оно или нет.

highlightSelected() {

    const selected = window.getSelection();
    const { data } = selected.baseNode;

    const formattedWord = this.formatWord( word );
    let { entities } = this.state;

    if( entities.indexOf( formattedWord ) !== -1 ) {
      entities = entities.filter( ( entity ) => {
        return entity !== formattedWord;
      });
    } else {
      entities.push( formattedWord );
    }  

    this.setState({ entities: entities });
}

все, что я делаю здесь, это либо удаление, либо нажатие слово к массиву в состоянии моего компонента. checkHighlighted() просто проверит, существует ли слово, отображаемое в этом массиве.

checkHighlighted( word ) {

    const formattedWord = this.formatWord( word );

    if( this.state.entities.indexOf( formattedWord ) !== -1 ) {
      return true;
    }
    return false;
  }

и наконец,formatWord() функция просто удаляет любые точки или запятые и делает все в нижнем регистре.

formatWord( word ) {
    return word.replace(/([a-z]+)[.,]/ig, '').toLowerCase();
}

надеюсь, что это помогает!