如何实现点击按钮后为选中的跨多行文本左侧添加垂直标线？

嘿，这个需求我刚好折腾过类似的，给你整了一套完整的实现方案，用HTML+CSS+JavaScript就能轻松搞定，一步步来哈！

1. 先搭好基础HTML结构 #

我们需要一个可编辑/可选中的文本容器，再加一个触发按钮：

<div class="text-container" contenteditable="true">
  这里是示例文本，你可以选中其中的第2到第4行，然后点击下方的按钮添加垂直标线。
  第二行文本内容，用来测试跨多行选中的情况。
  第三行文本，继续测试。
  第四行文本，完成跨多行的选中示例。
  第五行文本，不在选中范围内。
</div>
<button id="add-marker-btn">添加左侧垂直标线</button>

2. 用CSS搞定样式细节 #

给文本容器设置相对定位，这样标线可以基于它定位；再定义标线的样式（蓝色、窄条、不干扰文本操作）：

.text-container {
  position: relative;
  width: 80%;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #eee;
  font-size: 16px;
  line-height: 1.6;
  min-height: 200px;
}

.line-marker {
  position: absolute;
  left: -8px; /* 可以根据需求调整标线和文本的距离 */
  width: 3px;
  background-color: #2196F3; /* 你要的蓝色标线 */
  pointer-events: none; /* 避免标线干扰文本选择/编辑 */
}

3. JavaScript核心逻辑实现 #

这部分是关键，要获取选中的文本范围，计算它的位置和高度，然后生成标线：

document.getElementById('add-marker-btn').addEventListener('click', function() {
  // 先移除已有的标线，避免重复叠加
  const existingMarkers = document.querySelectorAll('.line-marker');
  existingMarkers.forEach(marker => marker.remove());

  const selection = window.getSelection();
  // 检查有没有选中内容
  if (selection.rangeCount === 0) {
    alert('请先选中一段文本哦！');
    return;
  }

  const range = selection.getRangeAt(0);
  const container = document.querySelector('.text-container');
  
  // 获取选中区域的所有边界矩形（跨多行时会有多个rect）
  const rects = range.getClientRects();
  if (rects.length === 0) return;

  // 计算选中区域相对于容器的顶部、底部位置，以及总高度
  const containerRect = container.getBoundingClientRect();
  const top = rects[0].top - containerRect.top + container.scrollTop;
  const bottom = rects[rects.length - 1].bottom - containerRect.top + container.scrollTop;
  const height = bottom - top;

  // 创建标线元素并设置样式
  const marker = document.createElement('div');
  marker.classList.add('line-marker');
  marker.style.top = `${top}px`;
  marker.style.height = `${height}px`;

  // 把标线加到容器里
  container.appendChild(marker);
});

额外说明 #

• 这里用了contenteditable="true"的div作为文本容器，比textarea更灵活，能更好地获取选中区域的位置；如果必须用textarea，需要额外处理文本行的位置计算，会稍微复杂一点。
• 代码里已经考虑了容器滚动的情况，用container.scrollTop修正了标线的位置，避免滚动后标线错位。
• 如果需要支持多次添加多条标线，只需要移除开头的“清除旧标线”的代码即可。

内容的提问来源于stack exchange，提问作者Jon De Cae