zoukankan      html  css  js  c++  java
  • 使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题(高亮后不能正确获取)

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

    使用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中高亮的内容
    

      



  • 相关阅读:
    React生命周期, 兄弟组件之间通信
    React组件式编程Demo-用户的增删改查
    React之this.refs, 实现数据双向绑定
    CCF CSP 201812-4 数据中心
    CCF CSP 201812-4 数据中心
    PAT 顶级 1020 Delete At Most Two Characters (35 分)
    PAT 顶级 1020 Delete At Most Two Characters (35 分)
    Codeforces 1245C Constanze's Machine
    Codeforces 1245C Constanze's Machine
    CCF CSP 201712-4 行车路线
  • 原文地址:https://www.cnblogs.com/XHappyness/p/9151841.html
Copyright © 2011-2022 走看看