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

使用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. ABAP术语-Application Server

    Application Server 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/17/1002777.html Server that ...

  2. window系统下pycharm的破解配置

    将C:\Windows\System32\drivers\etc\hosts内的写出: linux系统的话在 /etc/hosts,必须修改权限:sudo chmod a=rwx hosts 0.0. ...

  3. NPOI追加内容到xlsx报错，用Epplus往excle xlsx追加数据

    问题的现象就是,只要不修改xlsx,一直写入或者再次写入xlsx,追加内容都是不会有问题的.但是只要你修改了xlsx,用excle2010或者2007修改了xlsx的内容里面的列宽,或者行高,或者进行 ...

  4. jQuery的封装

    封装,最简单的效果就是一个效果你可以重复的去调用   本来前端之路时间不是很长,但是对封装还是有一点点自己个人的理解,曾经踩过的坑也不在少数,最后总结出我个人风格的封装,听一位大神指点过,每个人都有属 ...

  5. 简易的vuex用法

    vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信,下面将介绍它的简单用法 首先安装vue与vuex npm install vue npm install vuex --save ...

  6. MySQL版本详解

    一.版本说明 1.1.MySQL相关连接 MySQL官网:https://www.mysql.com/ MySQL下载:https://dev.mysql.com/downloads/mirrors/ ...

  7. Symfony FOSUserBundle用户登录验证

    symfony是一个由组件构成的框架,登录验证的也是由一些组件构成,下面就介绍一下FOSUserBundle的使用. 以symfony 3.3为例, 首先我们需要先安装一下FOSUserBundle. ...

  8. 洛谷 T51922 父子

    题目描述 对于全国各大大学的男生寝室,总是有各种混乱的父子关系. 那么假设现在我们一个男生寝室有不同的 nn 个人,每个人都至多有一个“爸爸”,可以有多个“儿子”,且有且只有一个人没有“爸爸”(毕竟是 ...

  9. Mysql 5.7 开启远程连接

    1 在控制台执行 mysql -uroot -p 系统提示输入数据库root用户的密码,输入完成后即进入mysql控制台 2 选择数据库 mysql -uroot -p use mysql; 开启远程 ...

  10. go学习笔记-语言基础

    语言基础 结构 基础组成: 包声明 引入包 函数 变量 语句 & 表达式 注释 程序 在开始编写应用之前,我们先从最基本的程序开始,在学习大部分语言之前,都会编写一个可以输出hello wor ...