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

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

　　

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

  1. WPF获取鼠标当前位置

    /// <summary> /// 设置鼠标的坐标 /// </summary> /// <param name="x">横坐标</par ...

  2. WPF中获取鼠标相对于屏幕的位置

    原文:WPF中获取鼠标相对于屏幕的位置 WPF中获取鼠标相对于屏幕的位置                                   周银辉WPF编程时,我们经常使用Mouse.GetPosi ...

  3. js获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  4. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  5. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  6. winform Chart控件 获取鼠标处坐标值方法

    Chart控件本身功能强大,应用广泛,因此其属性.方法也很多.此处介绍在很多应用中需要查看鼠标位置处坐标值的一些方法 1,调用Chart事件  GetToolTip 利用ToolTipEventArg ...

  7. JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans

    <html> <head> <meta http-equiv="content-type" content="text/html" ...

  8. JavaScript获取鼠标位置的三种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...

  9. window.location方法获取URL

    window.location方法获取URL 统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成: scheme://host:port/pa ...

随机推荐

  1. java程序员所必须掌握的内容

    以下内容有待细化,并用于考察员工的水平! 从低的往高级的说. 初级 1.掌握java语法 oop+io+网络 2.基本的数据结构 3.基本的算法-例如排序,合并 4.基本的几个javaee框架 spr ...

  2. LeetCode 相交链表

    基本思路 先计算出两个链表的长度 O(n) 将长的一个链表的指示指针移动到和短链表相同长度 O(n) 两个链表指示指针同时向前移动,直到二者相同或者NULL 代码实现 /** * Definition ...

  3. flex布局设置min-width

    在一个flex布局中,对于一个设置了flex属性设置为1的div容器,再对其设置min-width:0,保证内容不超出外层容器

  4. C# WebClient类上传和下载文件

    这篇文章主要介绍了C# WebClient类用法实例,本文讲解使用WebClient下载文件.OpenWriter打开一个流使用指定的方法将数据写入到uri以及上传文件示例,需要的朋友可以参考下   ...

  5. 什么是高防服务器？如何搭建DDOS流量攻击防护系统

    关于高防服务器的使用以及需求,从以往的联众棋牌到目前发展迅猛的手机APP棋牌,越来越多的游戏行业都在使用高防服务器系统,从2018年1月到11月,国内棋牌运营公司发展到了几百家. 棋牌的玩法模式从之前 ...

  6. Leecode刷题之旅-C语言/python-9.回文数

    /* * @lc app=leetcode.cn id=9 lang=c * * [9] 回文数 * * https://leetcode-cn.com/problems/palindrome-num ...

  7. 常用数字信号的产生（C实现）-ARMA模型数据生成

    ARMA模型属于信号现代谱估计的范畴,AR模型常用于信号的线性预测.AR模型最后归结为线性方程,MA最后为非线性方程,因此,AR模型使用较多. AR模型最后归结为解Yule-Walker方程,对应矩阵 ...

  8. linux-课题练习1

    1.创建组testgroup: 2.创建用户a2012,先采用默认设置创建,然后使该用户加入testgroup组. 3.创建用户a2013,其用户主目录为/tmp/a2013,其主组为testgrou ...

  9. Android Studio modify language level to Java 8

    If you need use lambda, should modify language level File -> Project Structure -> app -> Pr ...

  10. 【转】Python 数据库连接池

    python编程中可以使用pymysql进行数据库连接及增删改查操作,但每次连接mysql请求时,都是独立的去请求访问,比较浪费资源,而且访问数量达到一定数量时,对mysql的性能会产生较大的影响.因 ...