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

Answer 1

您可以使用选择的anchorNode或focusNode来获取当前所选节点的引用，然后从中获取文本的父元素。

var parent = selection.anchorNode.parentElement;

从这里只需检查它的nodeName属性即可查看它是否为mark。

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

之后只需用文本节点替换mark元素，并在grand parent元素上调用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中的选定文本是否已经有类？

1 个答案: