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

contenteditable标签是HTML5中的一个属性，用于将元素设置为可编辑的状态，使用户可以直接在页面上进行编辑。在contenteditable标签中选择并突出显示outerText的方法如下：

获取contenteditable标签的内容：可以使用JavaScript的document.getElementById()或document.querySelector()方法获取到contenteditable标签的DOM对象。
获取选中文本：使用DOM对象的selection对象来获取选中的文本。可以通过selection对象的getRangeAt()方法获取到选中的文本范围。
突出显示选中文本：可以使用CSS的text-decoration属性或background-color属性来实现文本的突出显示效果。通过修改选中文本的样式，例如设置背景色或添加下划线等，来突出显示选中的文本。

以下是一个示例代码，演示如何从contenteditable标签中选择并突出显示outerText：

HTML代码：

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

JavaScript代码：

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);
}

在上述示例中，当点击"突出显示outerText"按钮时，会将contenteditable标签中选中的文本突出显示出来，通过设置span元素的背景色为黄色来实现突出显示效果。

请注意，上述示例仅演示了如何从contenteditable标签中选择并突出显示outerText，实际应用中可能需要根据具体需求进行适当的修改和扩展。