如何在一个文本区域和一个可编辑的div中显示突出显示的文本在另一个文本区域中的位置？

// HTML
<textarea id="textarea1"></textarea>
<div contenteditable="true" id="editableDiv"></div>
<textarea id="textarea2"></textarea>

// JavaScript with jQuery
$(document).ready(function() {
  $('#editableDiv').on('input', function() {
    var inputText = $(this).text(); // 获取可编辑div中的文本内容
    var textArea2Text = $('#textarea2').val(); // 获取另一个文本区域的文本内容

    var index = textArea2Text.indexOf(inputText); // 在另一个文本区域中查找匹配的位置

    if (index !== -1) {
      var highlightedText = '<span class="highlight">' + inputText + '</span>'; // 使用span标签进行突出显示
      textArea2Text = textArea2Text.substring(0, index) + highlightedText + textArea2Text.substring(index + inputText.length);
      $('#textarea2').val(textArea2Text); // 更新另一个文本区域中的文本内容
    }
    
    // 滚动到突出显示文本的位置
    var element = document.getElementById('textarea2');
    element.scrollTop = element.scrollHeight;
  });
});

.highlight {
  background-color: yellow;
}