Javascript 内联文本的CSS垂直突出显示

我允许用户高亮显示文档中的文本，当文本高亮显示时，它将通过在左栏沟中显示垂直条来表示。我需要帮助绘制下面屏幕截图左侧的垂直条高光

模拟屏幕截图，其中黑条为文本

我已经能够使用

getSelection（）

捕获选择。我正在选择周围添加一个内联元素。我需要有关竖条的帮助，这些竖条指定选择了文档的哪一部分

我已经尝试了一些部分达到目的的方法，但我有点迷路了

此文本显示在

中。我们的愿望是尽可能地保持

。我正试图找到一种方法，让这个排水沟通过普通的旧HTML/CSS/JS，而不需要像角度排水沟组件这样复杂的东西，它必须跟踪大量的偏移、高度和位置

1） 追加相对绝对

对 我想我可以通过调用

getBoundingClientRect（）

在内联元素的高度和顶部添加一个相对定位的

div

，该div具有我所需的边沟位置

这很糟糕，因为调用

getBoundingClientRect（）

不能很好地处理内联元素，如代码笔中所示。另外，

divs

创建一个新行，它可能会分解文本块

2） 使每个高亮显示的部分成为块元素并使用边框 这很糟糕，因为我无法在不弄乱文档其余部分的间距的情况下，将边框正确定位在边沟中。此外，它还有与上面相同的问题，将文本分解为块元素

---

我主要是在寻找如何在左侧创建这些高光的指导，以便它们跨越内联元素的整个高度。

我也读过这个问题，但我无法解析出如何实际应用这些概念，我需要 一些指导

---

谢谢

最简单的方法是遵循一种方法（但它不便于调整大小）

选择一些文本并等待一秒钟：

vart；
函数标记（）{
var selection=getSelection（）
如果（selection.isCollapsed）返回
var rect=selection.getRangeAt（0）.getBoundingClientRect（）
var base=document.body.getBoundingClientRect（）
var span=document.createElement（'span'）
span.style.top=rect.top-base.top+'px'
span.style.height=rect.height+'px'
document.body.appendChild（span）
}
文档.添加的事件列表器（'selectionchange'，函数（e）{
清除超时（t）
t=设置超时（标记，1000）
})

正文{
左侧填充：.75em；
位置：相对位置；
}
跨度{
位置：绝对位置；
左：0；
宽度：.25em；
背景：蓝色；
}

我允许用户高亮显示文档中的文本，当文本高亮显示时，它将通过在左侧栏位中显示垂直条来表示。我需要帮助绘制下面屏幕截图左侧的垂直条高光。
模拟屏幕截图，其中黑条为文本
我将引用当前尝试的代码笔
我已经能够使用getSelection（）捕获选择。我正在选择周围添加一个内联元素。我需要有关竖条的帮助，这些竖条指定选择了文档的哪一部分。
我已经尝试了一些部分达到目的的方法，但我有点迷路了。
此文本将显示在预处理的文本中。我们的愿望是尽可能保持预张力。我正试图找到一种方法，让这个排水沟通过普通的旧HTML/CSS/JS，而不需要像角度排水沟组件这样复杂的东西，它必须跟踪大量的偏移、高度和位置。

我相信可能会有所帮助。将其与

getSelection（）

？您需要使用window.getSelection和getRangeAt，这些应该可以让您从所需的方向开始，@Cam这实际上是我用来抓取文本和创建内联元素的，但是这对高光的绘制没有帮助。我正在对使用

getSelection（）

绘制的元素使用

getBoundingClientRect（）

，但是，我仍然有issues@hungerstar您的答案与我现在的答案非常接近，但是，如果

pre

在文本之前或之后有空格，

height

和

top

属性是100%准确的。为什么不创建模糊文本，然后使用“替换当前选定文本”并将其置于黑色背景的范围内。。。解决了的。