如何从contenteditable标签中选择并突出显示outerText

<div id="editable" contenteditable="true">
  这是一个contenteditable标签，可以进行编辑。
</div>
<button onclick="highlightOuterText()">突出显示outerText</button>

function highlightOuterText() {
  var editableDiv = document.getElementById("editable");
  var selection = window.getSelection();
  
  // 获取选中的文本范围
  var range = selection.getRangeAt(0);
  
  // 获取选中的文本
  var selectedText = range.extractContents();
  
  // 创建一个带有突出显示样式的span元素
  var highlightedText = document.createElement("span");
  highlightedText.style.backgroundColor = "yellow";
  highlightedText.appendChild(selectedText);
  
  // 将突出显示的文本插入到选中的位置
  range.insertNode(highlightedText);
}