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

      



  • 相关阅读:
    Murano为镜像包添加Root用户密码
    Murano Weekly Meeting 2015.09.22
    Murano Weekly Meeting 2015.09.15
    Murano Weekly Meeting 2015.09.08
    Murano Deployment
    Murano Weekly Meeting 2015.09.01
    Murano Application
    Mongodb installation & userguide
    查看linux系统常用的命令,Linux查看系统配置常用命令
    SQL必知必会笔记
  • 原文地址:https://www.cnblogs.com/XHappyness/p/9151841.html
Copyright © 2011-2022 走看看