如何檢查html中的選定文本是否已經有一個類？

Question

我正在製作一個函數，它將選中一段文本並通過添加標記來突出顯示它。它會突出顯示文字，但如果再次單擊高亮顯示按鈕，文字會消失。相反，我只想讓文本恢復爲未突出顯示。任何人都有建議我怎麼能做到這一點？

highLightText() { 
 
    var selection = window.getSelection(); 
 
    console.log('this is the selection: ', selection); 
 
    var selection_text = selection.toString(); 
 

 
    var mark = document.createElement('mark'); 
 

 
    mark.textContent = selection_text; 
 

 
    var range = selection.getRangeAt(0); 
 
    range.deleteContents(); 
 
    range.insertNode(mark); 
 
    }

我的想法是，以某種方式檢查是否從VAR選擇所選文本有一個名爲標記中的一個元素，如果是的話，不與函數的其餘部分繼續。我只是不確定如何實現它。

Answer 1

您可以通過使用選擇的anchorNode或focusNode並從那裏獲取文本的父元素來獲取當前選定節點的引用。

var parent = selection.anchorNode.parentElement; 

從那裏它只是一個檢查它的事是nodeName屬性，看它是否是mark。

parent.nodeName == "MARK" //nodeName is uppercase 

之後，僅僅在文本節點更換標誌元素，並調用normalize()盛大父元素，以確保任何相鄰的文本節點獲得合併

let grandParent = parent.parentElement; 
parent.replaceWith(document.createTextNode(parent.textContent)); 
grandParent.normalize(); 

這將做所有的文字中標記元素而不僅僅是標記的選定文本，因爲如果這是您的意圖，您將不得不修改代碼。

演示（按任意鍵進行選擇後）

function highLightText() { 
 
    var selection = window.getSelection(); 
 
    var parent = selection.anchorNode.parentElement; 
 
    var selection_text = selection.toString(); 
 

 
    if (parent.nodeName == "MARK") { 
 
    let grandParent = parent.parentElement; 
 
    parent.replaceWith(document.createTextNode(parent.textContent)); 
 
    grandParent.normalize(); 
 
    return; 
 
    } 
 

 
    var mark = document.createElement('mark'); 
 

 
    mark.textContent = selection_text; 
 

 
    var range = selection.getRangeAt(0); 
 
    range.deleteContents(); 
 
    range.insertNode(mark); 
 
} 
 
document.addEventListener('keyup',highLightText);

<div> 
 
    <div>Test one two three</div> 
 
    <div>Test four five six</div> 
 
    <div>Test seven eight nine</div> 
 
    <div>Test ten eleven twelve</div> 
 
</div>