使用 window.getSelection() 方法獲取鼠標劃取部分的起始位置和結束位置的問題（高亮後不能正確獲取）

時間 2020-05-08

標籤使用 window.getselection window getselection 方法獲取鼠標部分起始位置結束問題不能正確欄目 Windows 简体版

原文原文鏈接

若是沒有高亮等複雜處理，只須要獲取一段文字中選取的字和位置，那麼javascript

使用window.getSelection()獲取div中選中文字內容及位置html

則能夠知足需求；app

--------------------------------------------------------------------------------------------高級需求-----------------------------------------------------------------------------------ide

可是，若是有這麼一個需求： 選中的文字要進行高亮，那麼使用使用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標籤spa

第二次劃取span標籤後的文字的時候，獲取的起始位置倒是相對於span標籤的，有沒有方法每次獲取的起始位置都是相對於div的？.net

看到同一個問題https://ask.csdn.net/questions/166543下的答案，試了並無用code

這裏，用了一個笨拙又巧妙的辦法，在div#content中，和div#marked-area平級添加一個divhtm

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。