javascript - 从文本选择中确定节点名称

Question

我有一个用例，用户可以在 p 元素中选择一些文本，我需要切换“粗体”它 - 即，如果它不是粗体，则将文本设为粗体，反之 -反之亦然。有没有办法根据所选文本确定节点类型/名称？

例如:在下面的示例中，当用户选择“Foo”时，我想知道已选择了一个 span。如果用户选择“栏”；我想知道 p 被选中了。如果用户选择“Foo B”；我想知道选择了 p。

$('#toggle-bold').click(function() {

   // The following will always add a new span wrapping the selected text then make it bold
   
   var selection= window.getSelection().getRangeAt(0);
   // Anyway to determine the node type/name of the selected text?
   var selectedText = selection.extractContents();
   var span= document.createElement("span"); 
   span.appendChild(selectedText); 
   selection.insertNode(span);
        
   $(span).css('font-weight', 'bold');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable="true">
    <span>Foo</span> Bar
</p>

<button id="toggle-bold">Toggle Bold</button>

Answer 1

Range对象为此具有两个属性:startContainer (范围开始的节点)和 endContainer (它结束的节点)。然后您可以通过 nodeName 属性获取节点名称。 (如果所讨论的节点是文本节点，您可能想要也可能不想使用 parentNode。)例如，因为您的 selection 变量实际上引用了 Range (不是 Selection ):

console.log("Start node's nodeName: " + selection.startContainer.nodeName);
console.log("End node's nodeName: " + selection.endContainer.nodeName);

通常，这些会再次显示 "#text"，因为范围可能位于文本节点中。

$('#toggle-bold').click(function() {

  // The following will always add a new span wrapping the selected text then make it bold

  var selection = window.getSelection().getRangeAt(0);
  // Anyway to determine the node type/name of the selected text?
  console.log("Start node's nodeName: " + selection.startContainer.nodeName);
  console.log("End node's nodeName: " + selection.endContainer.nodeName);


  var selectedText = selection.extractContents();
  var span = document.createElement("span");
  span.appendChild(selectedText);
  selection.insertNode(span);

  $(span).css('font-weight', 'bold');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable="true">
  <span>Foo</span> Bar
</p>

<button id="toggle-bold">Toggle Bold</button>

Range 还告诉您范围在这些容器元素中的位置开始和结束(通过 startOffset 和 endOffset ).