用更好的方式包装div的特定单词？

<div id="content">
  这是一段非常重要的文本，其中包含一些重要的信息。
</div>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

function highlightWords(elementId, wordToHighlight) {
  const element = document.getElementById(elementId);
  const text = element.innerHTML;
  const regex = new RegExp(`(${wordToHighlight})`, 'gi');
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
  element.innerHTML = highlightedText;
}

// 使用示例
highlightWords('content', '重要');

function highlightFirstWord(elementId, wordToHighlight) {
  const element = document.getElementById(elementId);
  const text = element.innerHTML;
  const regex = new RegExp(`(${wordToHighlight})`, 'i');
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>', 1);
  element.innerHTML = highlightedText;
}

// 使用示例
highlightFirstWord('content', '重要');