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

使用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. Sonar安装-Linux[20171227]

    前言     一款不错的代码质量管理工具Sonar 前期准备     官方参考文档 https://docs.sonarqube.org/display/SONAR/Documentation     ...

  2. CSRF的原理和防范措施

    a)攻击原理: i.用户C访问正常网站A时进行登录,浏览器保存A的cookie ii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参 ...

  3. yaml文件 .yml

    YAML文件简介 我们可能在spring配置文件里见到过.yml格式的东东,配置文件不都是.propertie或者.xml文件吗?.yml是什么鬼,今天我带你们来一探究竟. YAML(Yet Anot ...

  4. 通过swagger下载的文件乱码解决方法，求解

    这里的数据显示 点击Download Templates下载之后是显示一个response流都不是一个xlsx文件 这个是由什么原因造成的,求解?

  5. redis之哨兵(Sentinel)

    Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户端都没有实现主从切换的功能. 而 ...

  6. hadoop生态搭建（3节点）-03.zookeeper配置

    # https://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html # ===== ...

  7. python--基本类型之字符串

    String(字符串): 定义和创建字符串: 定义:字符串是一个有序的字符的集合,用于存储和表示基本的文本信息.注意:字符串的单引号和双引号都无法取消特殊字符的含义,如果想让引号内 var1='Hel ...

  8. 1826: [JSOI2010]缓存交换

    1826: [JSOI2010]缓存交换 https://www.lydsy.com/JudgeOnline/problem.php?id=1826 分析: 简单的贪心,然后调啊调...最近怎么了,码 ...

  9. 剁了xp，醉了win7

    装完win7,安装各种软件完毕,重启,然并卵.  cpu,内存飙升!! svchost.exe这个进程内存发疯了一样往上飙升 从 几十兆  到占用1个多G, 纳尼, 总共物理内存才2G. ╮(╯▽╰) ...

  10. Linux 下 PHP 扩展Soap 编译安装

    1.进入 PHP 的软件包 pdo 扩展目录中(注:不是 PHP 安装目录) [root@tester /]# /home/tdweb/php-5.4.34/ext/soap 执行 phpize 命令 ...