如何检查html中的选定文本是否已经有一个类？

问题描述：

我正在制作一个函数，它将选中一段文本并通过添加标记来突出显示它。它会突出显示文字，但如果再次单击高亮显示按钮，文字会消失。相反，我只想让文本恢复为未突出显示。任何人都有建议我怎么能做到这一点？如何检查html中的选定文本是否已经有一个类？

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选择所选文本有一个名为标记中的一个元素，如果是的话，不与函数的其余部分继续。我只是不确定如何实现它。

_ “有一个叫马克的类” _，你的意思是名为'mark'元素里面？ –

@PatrickEvans是的，我的措辞不好。 – Milos

检查'highlighter'元素是否已经存在？如果存在，只需打开其内容即可。 – raina77ow

答

您可以通过使用选择的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>

如何检查html中的选定文本是否已经有一个类？

相关推荐