Medium的note评论方式感觉很好，技术实现难度大么？

[buxiangshuo]

不熟悉前端，如果要实现，需要再JS上下不少功夫吧？

[otakustay]

如果你说的确实是medium.com的话

右侧是以<p>和<figure>元素为粒度的毫无难度

文字选中后的comment稍微复杂点：

1. 找个selection相关的库
2. 能定位选中文本的位置
3. 往上面放个图标

总结一下，没啥难度……

[buxiangshuo]

@otakustay 感谢回答

我使用的是这个库 http://jquerypp.com/#range

得到选中文本位置和内容后，如果使用bootstrap的popover

用哪种方式在原文选中文本位置包裹<span>标签呢？

用wrap，replace，或者其他什么好的方案？

非常感谢！

[otakustay]

@buxiangshuo 没用过这库，不过初看了一下文档，似乎拿到range后，用range.rect('page')能拿到这个range在的位置（top和left）

然后的一个问题就是，bootstrap必须有个element让他放，虽然我们有了top和left，但硬是没办法给bootstrap一个目标元素……一般来说这种时候我会直接自己写个popover这没啥难度，如果你一定要用bootstrap，那么可以在range的位置（top和left）创建一个position: absolute的，0x0的，visibility: hidden的元素在那给popover用- -

[buxiangshuo]

@otakustay

我试了一下replace，获取到range后用range.toString()得到文本，然后对文本替换成加入tag的样子

$("div:contains('" + ranger + "')").each(function() {
var Text = $(this).html().replace(ranger, "<span id='item' rel='popover' data-content='text' data-placement='top'>" + ranger + "</span>");
$(this).html(Text);
});

最后再在popover退掉后再恢复文本，最外面放一个for

办法很笨拙，肯定有更好的方法，初学JS，还有很多地方要学习啊…………