如何檢測選定的文本是否包裹在span標籤中

Question

我有一個簡單的contenteditablediv，它提供一個編輯器和一個帶onclick函數的按鈕，可將選定文本的顏色更改爲黃色。

function yellow(){ 
    {  
     var selection = window.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "yellow"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    } 
    } 

最近，我注意到，如果我選擇了我的div的文本之外，它仍然可以（因爲我使用window.getSelection()）黃色。

爲了解決這個問題，我添加一個if語句：

function yellow(){ 
    {  
     var selection = window.getSelection().getRangeAt(0); 
     if(window.getSelection().baseNode.parentNode.id != "editor1") return; 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "yellow"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    } 
    } 

我期待再添if語句與此類似：

if(window.getSelection().baseNode.parentNode.id != "editor1") return; 

除了沒有id != "editor1"，它檢測是否選擇文本有跨文本纏繞或不纏繞。

Answer 1

if (window.getSelection().baseNode.parentNode.tagName === 'SPAN')

https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName