选中文本前加空白/字符后，更新URL链接时内容丢失问题求助

开发的选中文本添加URL链接功能，正常创建和更新链接无问题，但在已链接文本前添加空白/字符后操作会出现异常，具体复现步骤：

• 选中<div id="content">中的"highlight"单词
• 点击Link按钮，输入URL保存，单词应用对应CSS样式
• 将光标置于"highlight"前，添加任意字符或空格
• 点击Link按钮后保存，此前添加的字符/空格会被删除
• 重复步骤3-4，异常仅首次出现，后续操作无问题

原因分析 #

1. selectionRange未实时更新：点击Link按钮时，checkExistingLink函数依赖的selectionRange是第一次创建链接时保存的旧范围，导致后续判断锚点时错误地将新添加的字符纳入删除范围。
2. 状态逻辑错误：textSelected变量初始为false，首次创建链接后设为true但未随实际选中情况更新，导致checkExistingLink在不该触发时执行，且复用旧范围。
3. 全局节点复用污染：全局newNode变量被重复赋值，首次修改链接时干扰节点的正确插入和范围处理。

解决方法 #

1. 实时获取选择范围：每次点击Link按钮时，重新获取当前的选择范围，不再依赖旧的全局存储值。
2. 移除冗余状态变量：删除textSelected变量，改为每次操作时直接检查当前选中内容和范围，避免状态错误。
3. 避免全局节点复用：创建新锚点时每次生成新的<a>元素，不再使用全局newNode，防止节点污染。
4. 优化锚点查找逻辑：从选中范围的公共祖先节点开始查找锚点，确保准确识别选中的已链接文本。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Highlighter</title>
<style>
.highlighted {
    color: blue;
}
#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}
#content {
    white-space: pre;
}
</style>
</head>
<body>

<div id="content" contentEditable="plaintext-only">Select and highlight this text</div>
<button id="linkIcon">Link</button>

<!-- Popup -->
<div id="popup">
<input type="text" id="selectedText">
<input type="text" id="urlInput" placeholder="Enter URL">
<button id="saveBtn">Save</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const contentDiv = document.getElementById("content");
    const linkIcon = document.getElementById("linkIcon");
    const popup = document.getElementById("popup");
    const selectedTextInput = document.getElementById("selectedText");
    const urlInput = document.getElementById("urlInput");
    let selectionRange; // 实时存储当前选择范围
    let originalSelection = "";
    let lastAnchorText = "";
    let lastUrl = "";

    // 获取选中文本
    function getSelectedText() {
        return window.getSelection()?.toString() || "";
    }

    // 获取当前选择范围中的锚点元素
    function getExistingAnchor(range) {
        if (!range) return null;
        // 检查选中范围是否包含锚点
        const commonAncestor = range.commonAncestorContainer;
        if (commonAncestor.nodeName === "A") {
            return commonAncestor;
        }
        // 遍历子节点查找锚点
        const nodes = range.cloneContents().childNodes;
        for (let i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeName === "A") {
                return nodes[i];
            }
        }
        return null;
    }

    // 检查是否选中了已存在的链接
    function checkExistingLink() {
        const selection = getSelectedText();
        if (!selection) return false;
        
        selectionRange = window.getSelection().getRangeAt(0);
        const anchor = getExistingAnchor(selectionRange);
        if (anchor) {
            urlInput.value = anchor.href;
            selectedTextInput.value = anchor.innerText;
            popup.style.display = "block";
            originalSelection = anchor.innerText;
            return true;
        }
        return false;
    }

    // Link按钮点击事件
    linkIcon.addEventListener("click", function() {
        if (!checkExistingLink()) {
            const selection = getSelectedText();
            if (selection) {
                selectionRange = window.getSelection().getRangeAt(0);
                originalSelection = selection;
                selectedTextInput.value = selection;
                urlInput.value = lastUrl || "https://";
                popup.style.display = "block";
            } else {
                alert("Please select some text first.");
            }
        }
    });

    // Save按钮点击事件
    document.getElementById("saveBtn").addEventListener("click", function() {
        const url = urlInput.value.trim();
        if (!originalSelection || !url) {
            alert(!originalSelection ? "No text selected." : "Please enter a URL.");
            return;
        }

        const existingAnchor = getExistingAnchor(selectionRange);
        let anchorNode;
        if (existingAnchor) {
            // 更新现有锚点
            existingAnchor.href = url;
            existingAnchor.innerText = selectedTextInput.value;
            anchorNode = existingAnchor;
        } else {
            // 创建新锚点
            anchorNode = document.createElement("a");
            anchorNode.href = url;
            anchorNode.innerText = selectedTextInput.value;
            anchorNode.classList.add("highlighted");
            // 删除选中内容并插入新锚点
            selectionRange.deleteContents();
            selectionRange.insertNode(anchorNode);
        }

        // 更新记录的最后链接信息
        lastAnchorText = selectedTextInput.value;
        lastUrl = url;

        // 重置弹窗和状态
        popup.style.display = "none";
        originalSelection = "";
        selectedTextInput.value = "";
        urlInput.value = "";
    });
});
</script>

</body>
</html>

内容的提问来源于stack exchange，提问作者fingers10