如何清除存储中指定ID的已选中文本背景色？

问题描述 #

我有一个包含多行文本的<div>元素，用户可通过鼠标选中文本。我编写了JavaScript代码，点击btnChangeColor按钮时能为选中的文本设置背景色，同时将带唯一ID的选中项存储在数组中。现在需要实现点击另一个按钮时，根据传入的唯一ID清除对应选中项的背景色。

设置背景色的代码：

$(function(){
    var result = [];

    $("#btnChangeColor").click(function () {       
        let currentColor = "red";
        if (window.getSelection()) {
            var sel = window.getSelection();
            var range = sel.getRangeAt(0);
            var selectedText = range.toString();
            var startOffset = range.startOffset;
            var endOffset = startOffset + selectedText.length;
         
            var obj = {
                Id: "SomeUniqueIdPerSelection",
                start: startOffset,
                end: endOffset,
                text: selectedText
            }
            
            result.push(obj);            
            document.designMode = "on";
            // 为文本设置背景色
            document.execCommand("BackColor", false, currentColor);
            document.designMode = "off";
        }    
    })
})

清除按钮的现有代码：

$("btnClearBtn").click(function(){    
    let id = GetSelectionId();
    let selected = result.find(x=>x.Id === id);
    // 如何清除该选中项的背景色？
})

解决方案 #

要实现清除指定选中项的背景色，核心是重新定位到该选中项的文本范围，再通过命令移除背景色。需要先完善选中项的存储逻辑，再实现清除逻辑：

1. 完善选中项存储逻辑 #

原代码只保存了偏移量，缺少文本节点信息，无法准确定位。修改存储逻辑，额外记录选中范围的起始节点：

var obj = {
    Id: Date.now().toString(), // 生成真正的唯一ID，替换示例中的固定值
    startContainer: range.startContainer, // 新增：保存起始文本节点
    start: startOffset,
    end: endOffset,
    text: selectedText
}

2. 实现清除背景色的代码 #

在清除按钮的点击事件中，通过保存的节点和偏移量重建选中范围，再执行清除背景色的命令：

$("#btnClearBtn").click(function(){    
    let id = GetSelectionId();
    let selectedItem = result.find(x => x.Id === id);
    
    if (!selectedItem) return;
    
    // 重建选中范围
    const range = document.createRange();
    range.setStart(selectedItem.startContainer, selectedItem.start);
    range.setEnd(selectedItem.startContainer, selectedItem.end);
    
    // 选中该范围
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    
    // 清除背景色
    document.designMode = "on";
    document.execCommand("BackColor", false, "transparent"); // transparent兼容性更好
    document.designMode = "off";
    
    // 可选：清除后从数组中移除该记录
    result = result.filter(x => x.Id !== id);
})

关键注意点 #

• 必须保存startContainer：startOffset是相对于文本节点的偏移，没有节点无法准确定位文本位置。
• 选择器修正：原代码中$("btnClearBtn")缺少#，需改为$("#btnClearBtn")才能正确选中按钮。
• 清除背景色的参数：用transparent比none兼容性更好，也可以传入空字符串""。

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