如何让我的插入节点停止突出显示？

Question

我有一个用于我正在制作的 chrome 扩展的 Javascript 函数，它显示一个弹出字典。这是通过在用户用鼠标突出显示的文本下方插入一个跨度节点来完成的。

function insertPopupDict() {
    if (window.getSelection) {
        var selection = window.getSelection();
        var text = selection.toString();
        var range = selection.getRangeAt(0);

        var popupDictionaryWindow = document.createElement('span');
        popupDictionaryWindow.id = 'hawaiian-popup-dictionary'
        popupDictionaryWindow.style = 'margin-top: 35px; width: 360px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;';
        
        searchWord(text).then(defenitions => {
            popupDictionaryWindow.innerHTML = text + "<hr><br>";
            for (var i = 0; i < defenitions.length; i++) {
                popupDictionaryWindow.innerHTML += defenitions[i] + "<br><br>"
            }
            range.insertNode(popupDictionaryWindow);
        });
        popupVisible = true;
    }
}

弹出窗口有效，但弹出窗口中的文本也会突出显示。

有人知道如何阻止这种情况发生吗？我是 Javascript 新手，老实说，我并不完全理解选择范围是如何工作的。我想突出显示所选单词，但取消选择新弹出窗口中的任何内容。

Answer 1

找到了解决方案。仍然不完全理解为什么我必须这样做，但解决方案是在与旧范围相同的位置创建一个新范围。

function insertPopupDict() {
    if (window.getSelection) {
        let selection = window.getSelection();
        var text = selection.toString();
        var range = selection.getRangeAt(0);

        //this is the solution to the highlight problem
        var newRange = document.createRange();
        newRange.setStart(selection.focusNode, selection.startOffset);

        var popupDictionaryWindow = document.createElement('span');
        popupDictionaryWindow.id = 'hawaiian-popup-dictionary'
        popupDictionaryWindow.style = 'margin-top: 35px; width: 360px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;';

        searchWord(text).then(defenitions => {
            popupDictionaryWindow.innerHTML = text + "<hr><br>";
            for (var i = 0; i < defenitions.length; i++) {
                popupDictionaryWindow.innerHTML += defenitions[i] + "<br><br>"
            }
            //place node at newRange instead of range
            newRange.insertNode(popupDictionaryWindow);
        });
        popupVisible = true;
    }
}