Question

我有一个简单的contenteditable div提供编辑器，还有一个带有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

Answer 2

在https://stackoverflow.com/a/61329546/670839处检查我的答案，然后将A替换为SPAN。它遵循相同的逻辑。

如何检测所选文本是否包含在span标记中

2 个答案: