使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题（高亮后不能正确获取）...

最新推荐文章于 2023-03-24 14:49:00 发布

weixin_33922670

最新推荐文章于 2023-03-24 14:49:00 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/XHappyness/p/9151841.html

版权

如果没有高亮等复杂处理，只需要获取一段文字中选取的字和位置，那么

使用window.getSelection()获取div中选中文字内容及位置

怎么获取textarea中选中文字

则可以满足需求；

--------------------------------------------------------------------------------------------高级需求-----------------------------------------------------------------------------------

但是，如果有这么一个需求： 选中的文字要进行高亮，那么使用使用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中高亮的内容

转载于:https://www.cnblogs.com/XHappyness/p/9151841.html

weixin_33922670

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题（高亮后不能正确获取）...

如果没有高亮等复杂处理，只需要获取一段文字中选取的字和位置，那么使用window.getSelection()获取div中选中文字内容及位置怎么获取textarea中选中文字则可以满足需求；--------------------------------------------------------------------------------------------高级...
复制链接

扫一扫