Javascript 围绕任意html范围绘制轮廓

我正在寻找一种在HTML文档中围绕任意范围绘制

大纲的方法。
i、 e.我想做一些类似的事情：

var start=document.getElementById('foo');
var end=document.getElementById('bar');
var range = document.createRange();
range.setStart(start, 0);
range.setEnd(end, 0);

然后在
范围
周围出现一个
轮廓

到目前为止，我已经研究了以下方法：
1） 
document.execCommand
但遗憾的是，似乎只能通过这种方法应用背景色或前景色，而不能应用任何类型的边框或轮廓。
2） 将
范围设置为文档
选择
，但是css似乎不允许在
：：选择
选择器上使用边框或轮廓

是否有人知道通过上述方法或其他方法实现这一点的方法？也许有可能以某种方式计算文本区域，然后用画布或一个或多个绝对定位div绘制它

假设：

注意：我只需要在主程序弹出菜单时暂时执行此操作，之后它将再次消失，因此，可以安全地忽略诸如绘制矩形后窗口滚动或添加到文档中的更多内容等内容。
这可能是使用jQuery获取感兴趣元素的解决方案的开始

示例代码：

<div class="container">
    <p>This is some text...</p>
    <p class="foo">This is some text...</p>
    <p>This is some text...</p>
    <p>This is some text...<b>with bold</b></p>
    <p class="bar">This is some text...</p>
    <p>This is some text...</p>
    <p>This is some text...</p>    
</div>

jQuery看起来像：

var lastElm = $(".bar");
$(".foo").nextUntil(lastElm).add(lastElm).wrapAll('<div class="outline" />');

var lastElm=$（“.bar”）；
$（“.foo”）.nextUntil（lastElm）.add（lastElm）.wrapAll（“”）；

我设置了一个小提琴演示：

一种解决方案是将感兴趣的元素包装在
中，并应用样式来显示轮廓

但是，您需要考虑开始/结束元素位于单独块中的情况。在这种情况下，包装器可能会破坏布局

我可以通过一些反馈来调整这一点。
在这里摆弄：

一个简单的方法（不是最干净的）是：

获取第一个元素和最后一个元素的位置：

var startElem = $('#foo'), 
    startPos = startElem.position(), 
    endElem = $('#bar').position(), 
    endPos = endElem.position();

制作一个从开始到结束的新div，如下所示：

var selection = $('<div/>').css({
    'z-index': 1000;
    position: absolute,
    background: none,
    border: '1px solid #F00',
    top: startPos.top,
    left: startPos.left,
    width: startElem.css('width').replace('px',''),
    height: ( endPos.top + parseFloat(endElem.css('height').replace('px','') ) ) - startPos.top
}).appendTo('body');

var selection=$（''）.css({
‘z指数’：1000；
位置：绝对，
背景：无，
边框：“1px实心#F00”，
top:startPos.top，
左：startPos.left，
宽度：startElem.css（'width'）。替换（'px'，''），
高度：（endPos.top+parseFloat（endElem.css（'height'）.replace（'px'，''）-startPos.top
}).附于（“主体”）；
在这种方法中，概述的元素从文档流中删除，我觉得这很有用，也很有趣。Hrm，我认为有三个错误。1） endElem变量2）的额外.position（）
z-index
需要转义，因为虚线3）高度线上缺少闭合支撑。-即使有了这些更正，尽管我似乎无法让它在JSFIDLE中做任何事情，但我对jQuery不太熟悉，所以可能我遗漏了一些明显的东西。谢谢，我怀疑这会遇到一些问题，涉及块等更复杂的边缘情况。正如您所说，不过，我会在应用程序中尝试一下，看看它到底有多大问题。。。只需首先快速将其转换为常规JS，因为遗憾的是，该应用程序似乎无法与jquery配合使用。@MalcolmMacLeod我不确定您指的是什么应用程序，因此如果没有更多详细信息，我无法提供任何建议。但是，如果您在jQuery中使用原型，JavaScript程序员可以编写具有相同功能的代码。如果您有一些在现实世界中可能遇到的示例HTML，这将有助于测试jQuery原型。请随时通知我们。祝你好运！
var selection = $('<div/>').css({
    'z-index': 1000;
    position: absolute,
    background: none,
    border: '1px solid #F00',
    top: startPos.top,
    left: startPos.left,
    width: startElem.css('width').replace('px',''),
    height: ( endPos.top + parseFloat(endElem.css('height').replace('px','') ) ) - startPos.top
}).appendTo('body');