Выделите искомый текст в документе html, игнорируя теги html, используя React

Question

У меня есть строка с содержанием html. Примерно так

  const text = "My name is Alan and I <span>an</span> <div class="someClass">artist</div>."

Я рендерил это внутри компонента реакции, используя dangerouslySetInnerHTML. Этот текст действительно длинный и содержит различные типы тегов HTML.

Я хочу найти слово и выделить его в этом документе, когда пользователь печатает. Функциональность аналогична функции поиска (cmd + f) браузера. При вводе текста текст должен выделяться.

Это то, что я ищу:

 user types `an`
 const text = "My name is Alan and I <span>an</span> <div class="someClass">artist</div>."
result: "My name is Al<mark>an</mark> and I <span><mark>an</mark></span> <div class="someClass">artist</div>."

Я пытался использовать эту библиотеку https://github.com/bvaughn/react-highlight-words, но проблема заключается в он также выделяет текст внутри тегов и портит содержимое.

result: "My name is Al<mark>an</mark> and I <sp<mark>an</mark>><mark>an</mark></span> <div class="someClass">artist</div>."

Тогда я решил использовать свое собственное регулярное выражение и придумал это регулярное выражение:

const regex = new RegExp(((`${searchedText}`)(?![^<>]*>)))

, но response (eslint) выдает эту ошибку в ?:

This experimental syntax requires enabling the parser plugin: 'partial Application'

Вот мой код:

get highlightedText() {
      if (searchText === '') return self.renderedText;
      const regex = new RegExp((`${searchText}`)((?![^<>]*>)));
      const parts = self.renderedText.split(regex);
      return parts
         .map(part => (regex.test(part) ? `<mark>${part}</mark>` : part))
         .join('');
    },

Я не уверен, что я делаю неправильно. Регулярное выражение прекрасно работает, так как я протестировал регулярное выражение с помощью regextester.com

Любая помощь приветствуется. Спасибо!