标签：cti rac 偏差 rip 怎么 sdn mouse 选中文字 sof
如果没有高亮等复杂处理，只需要获取一段文字中选取的字和位置，那么
使用window.getSelection()获取div中选中文字内容及位置
则可以满足需求；
--------------------------------------------------------------------------------------------高级需求-----------------------------------------------------------------------------------
但是，如果有这么一个需求： 选中的文字要进行高亮，那么使用使用window.getSelection()获取div中选中文字内容及位置里面的方法:
<!DOCTYPE html>
<html>
<body>
<div id="content">
<div ng-bind-html="markContent" id="marked-area"></div>
</div>
</body>
<script type="text/javascript">
$scope.markContent = ‘我是要进行选择并高亮的内容····‘
$(document).ready(function () {
$("#marked-area").mouseup(function (e) {
$scope.saveSelectionText();
});
});
saveSelectionText: function () { //不考虑ie9-
$scope.selectionText[0] = window.getSelection().toString();
//选中的文字
$scope.selectionText[1] = window.getSelection().anchorOffset; //开始位置
$scope.selectionText[2] = window.getSelection().focusOffset; //结束位置
//选中的值高亮
var reg = new RegExp($scope.escapeString($scope.selectionText[0]), ‘ig‘);
var replaceStr = ‘<span class="answer-column-color-bg-‘ + (i + 1) + ‘">‘+$scope.mark.selectionText[0]+‘</span>‘;
$scope.markContentt = $scope.markContent.replace(reg, replaceStr);
//处理字符串中可能对正则有影响的字符串
escapeString: function (value) {
var str = value.replace(new RegExp(‘\\\\‘, ‘g‘), ‘\\\\‘);
var characterss = [‘(‘, ‘)‘, ‘[‘, ‘]‘, ‘{‘, ‘}‘, ‘^‘, ‘$‘, ‘|‘, ‘?‘, ‘*‘, ‘+‘, ‘.‘];
characterss.forEach(function (characters) {
var r = new RegExp(‘\\‘ + characters, ‘g‘)
str = str.replace(r, ‘\\‘ + characters)
})
return str;
},
}
</script>
</html>
第一次划取执行的时候没有问题，获取的起始位置是相对于div标签的，执行之后会向html中添加span标签
第二次划取span标签后的文字的时候，获取的起始位置却是相对于span标签的，有没有方法每次获取的起始位置都是相对于div的？
看到同一个问题https://ask.csdn.net/questions/166543下的答案，试了并没有用
这里，用了一个笨拙又巧妙的办法，在div#content中， 和div#marked-area平级添加一个div
<div id="content">
<div ng-bind-html="markContentStore" id="marked-area-hiden"></div>
<div ng-bind-html="markContent" id="marked-area"></div>
</div>
1. #content相对定位，#marked-area-hiden绝对定位，并将背景色和字体色透明，浮在#marked-area上，
这里要注意：#marked-area-hiden和#marked-area位置样式要一某一样，保证两个div中文字位置无偏差；
2. markContentStore是markContent初始值，即没有高亮的值，并保持不变
这样，每次选择其实是选的#marked-area-hiden的文字，高亮的是#marked-area中的文字，
因为#marked-area-hiden内容一直不变，所以每次选择能获取正确的位置信息；而它又是透明的，用户看到的则是#marked-area中高亮的内容
使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题（高亮后不能正确获取）
标签：cti rac 偏差 rip 怎么 sdn mouse 选中文字 sof
原文地址：https://www.cnblogs.com/XHappyness/p/9151841.html
