如何通过JavaScript实现鼠标点击清除自定义文本选中渐变样式

我明白你的问题了——你实现了文本选中时的渐变背景高亮，但现在这个高亮会一直留在那里，没法像原生选中那样点击页面其他地方就取消。问题出在你把选中的文本替换成了带样式的span元素，但没有处理移除这些span并恢复原始文本的逻辑。

下面是修改后的完整方案，核心是添加一个移除高亮的函数，并且在点击页面时触发它：

修改后的代码 #

HTML #

<p>This is an example text. Try selecting parts of it, then click anywhere to remove the highlight!</p>

CSS #

::selection {
  background: none; /* 隐藏原生选中样式 */
}

/* 给高亮span统一加类，方便后续识别和操作 */
.highlighted-text {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
}

JavaScript #

// 标记当前是否存在高亮文本
let hasHighlightedText = false;

// 移除所有高亮样式，恢复原始文本结构
function removeHighlight() {
  // 找到所有我们添加的高亮span
  const highlightSpans = document.querySelectorAll('.highlighted-text');
  
  highlightSpans.forEach(span => {
    const parent = span.parentNode;
    // 将span内部的内容（文本或子元素）移回span的位置
    while (span.firstChild) {
      parent.insertBefore(span.firstChild, span);
    }
    // 删除空的span节点
    parent.removeChild(span);
  });
  
  hasHighlightedText = false;
}

// 给选中的文本添加高亮样式
function wrapSelectedText() {
  // 先清除已有高亮，避免重复包裹
  removeHighlight();
  
  const selection = window.getSelection();
  // 如果没有选中任何内容，直接返回
  if (selection.rangeCount === 0 || selection.isCollapsed) {
    return;
  }
  
  const range = selection.getRangeAt(0);
  const selectedContent = range.extractContents();
  
  const span = document.createElement("span");
  span.classList.add('highlighted-text'); // 使用类绑定样式，更易维护
  span.appendChild(selectedContent);
  
  range.insertNode(span);
  // 清除原生选中状态，避免干扰
  selection.removeAllRanges();
  
  hasHighlightedText = true;
}

// 绑定文本选中相关事件
document.addEventListener('mouseup', wrapSelectedText);
document.addEventListener('keyup', wrapSelectedText);
document.addEventListener('selectionchange', wrapSelectedText);

// 绑定点击移除高亮事件
document.addEventListener('mousedown', () => {
  if (hasHighlightedText) {
    removeHighlight();
  }
});

关键改进点说明 #

• 新增removeHighlight函数：专门负责清理高亮样式，把span里的内容还原到原位置，再删除空span，彻底恢复文本结构。
• 用CSS类替代内联样式：既方便修改样式，也能精准识别我们添加的高亮元素。
• 前置清除逻辑：每次添加新高亮前先移除旧的，避免多次选中后生成多层嵌套的span。
• 清除原生选中状态：添加完高亮后主动清除选中范围，避免原生选中样式残留。

这样修改后，你选中文本时会显示渐变高亮，点击页面任意位置就会移除高亮，和原生选中的体验完全一致啦！

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