Question

我们说我有以下文字：

嗨，<span class='blue_mark'>我的名字是Bob </span>。

我们想要用.red_mark突出显示 Bob 。当我这样做时，最近的父亲将是.blue_mark而不是主要父母。我想计算这个，因为我不希望任何跨度嵌套在彼此内部。仅来自主要的父母。

这是我的代码：

var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  var contents = range.extractContents();
  var node = document.createElement('span');
  node.classList.add('blue_mark');
  node.appendChild(contents);
  range.insertNode(node);
  selection.removeAllRanges(); //Clear the selection, showing highlight

在insertNode之前，我想检查跨度是否嵌套在另一个span中。如果是这样，请不要插入并发出警报。如果没有，则插入内容/

Answer 1

所以基本上，你不想有任何重叠的跨度。所以：

选择的开始不能在范围内
选择的结尾不能在范围内
选择不能完全包含范围

首先，实用功能：

function isInSpan(node) {
    if (node && node.nodeType === 3) {
        node = node.parentNode;
    }
    while (node && node.nodeType === 1) {
        if (node.nodeName.toUpperCase() === "SPAN") {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

然后，我相信你可以检查这些：

if (isInSpan(range.startContainer) ||
    isInSpan(range.endContainer) ||
    range.cloneContents().querySelector("span")) {
    // Do the alert
} else {
    // Go ahead and create the span
}

（看到querySelector上的DocumentFragment感到惊喜。）

插入Node时如何找到最近的父节点？

1 个答案: