如何在滚动条中标记对突出显示的单词的所有引用？

<div id="scroll-container">
  <p>这是一段包含突出显示单词的文本。这个单词是<span class="highlight">突出显示</span>的。</p>
  <p>这是另一段包含突出显示单词的文本。这个单词也是<span class="highlight">突出显示</span>的。</p>
  <p>这是第三段文本，没有引用突出显示单词。</p>
</div>

#scroll-container {
  width: 300px;
  height: 200px;
  overflow: auto;
}

.highlight {
  background-color: yellow;
}

var container = document.getElementById('scroll-container');
var highlightedWord = '突出显示';

container.addEventListener('scroll', function() {
  var paragraphs = container.getElementsByTagName('p');

  for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs[i];
    var text = paragraph.innerText;

    if (text.indexOf(highlightedWord) !== -1) {
      var regex = new RegExp(highlightedWord, 'g');
      var highlightedText = text.replace(regex, '<span class="highlight">' + highlightedWord + '</span>');
      paragraph.innerHTML = highlightedText;
    }
  }
});