最近遇到的一个需求是,选择某段文字中的部分,为选中区域加颜色主要是用到window.getSelection()rangeObject

主要方法

需要区分高级浏览器和IE。这里只讨论高级浏览器下的用法。

  • userSelection = window.getSelection()
  • userSelection.toString()
  • rangeObject = userSelection.getRangeAt(0)
  • rangeObject.startContainer
  • rangeObject.getClientRects()
  • rangeObject.deleteContents()
  • rangeObject.insertNode(span)
  1. MDN Range
  2. MDN Selection
  3. 《Javasctipt高级程序设计》P438

代码

前方高能,大段代码。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/*是否在合法选择范围内*/
function rangeIsOk(sContainer, eContainer){
}
$('html, body').on('mousedown', function(e){
if(!$(e.target).is('.tip-entity-list *')){
// 先清空选区,否则再次点击选区会再次获得选区内容
userSelection && userSelection.removeAllRanges();
selTip.hide();
}else if($(e.target).is('*[unselectable=on]')){
e.preventDefault();
return false;
}
});
$('body').on('mouseup', function(e){
var me = $(this);
// 优先用高级浏览器的
if(window.getSelection()){
userSelection = window.getSelection();
selText = userSelection.toString();
}
// 没有选中的文字,或者click事件直接返回
if(!selText.length) return false;
// 获得多个选区中的第一个选区
rangeObject = userSelection;
if (userSelection && userSelection.getRangeAt) {
rangeObject = userSelection.getRangeAt(0);
}
if(!rangeObject.collapsed){
var sContainer = rangeObject.startContainer.parentNode;
var eContainer = rangeObject.endContainer.parentNode;
// 下面这个是为了定位选中后提示框的位置
if(rangeIsOk(sContainer, eContainer)){
// 获得选中区域的一个矩阵
var rangeRects = rangeObject.getClientRects();
var maxTop = 0, num = 0, pHeight = 20;
for(var i = 0, len = rangeRects.length; i < len; i++){
//pHeight:一行文字的高度,为了避免双击选中整个大的区域
if(rangeRects[i].height <= pHeight && rangeRects[i].width && maxTop < rangeRects[i].top){
maxTop = rangeRects[i].top;
num = i;
}
}
var lastLeft = Math.floor(rangeRects[num].left + rangeRects[num].width);
var lastTop = Math.ceil(rangeRects[num].top + rangeRects[num].height);
tipX = lastLeft;
tipY = lastTop + $(window).scrollTop();
var tipEntityLen = $('.tip-entity-item').length;
if(tipEntityLen){
// 不trim会获得选中的空格
if($.trim(selText)){
tipShow(selText, tipX, tipY);
}
}else{
// open dialog
showTipPanel($("#messPanel"), "没有待选项");
}
}
}
});
function tipShow(text, tipX, tipY){
selTip.css('left',tipX).css('top',tipY).show();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 加上颜色
$('body').on('click', '.tip-entity-item', function(e){
var me = $(this);
var color = me.attr('data-color');
var title = me.attr('data-title');
var type = me.attr('data-type');
var sContainer = rangeObject.startContainer.parentNode;
var eContainer = rangeObject.endContainer.parentNode;
if(rangeIsOk(sContainer, eContainer)){
var span = document.createElement('span');
span.innerHTML = selText;
span.style.background = color;
span.title = title;
span.setAttribute('data-eid', type);
rangeObject.deleteContents();
rangeObject.insertNode(span);
}else if(sNodeName == 'SPAN' || eNodeName == 'SPAN'){
alert('已经有选中了的,点击取消后再进行重新选择')
}
selTip.hide();
});
1
2
3
4
5
6
7
8
9
10
11
12
递归的为某节点添加不可选择属性
function makeUnselectable(node) {
//Node.ELEMENT_NODE
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}