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

使用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. SAP销售订单屏幕字段控制隐藏，必输等

    1.T-CODE:shd0 创建变式  , 点击确认按钮后,SAP进入下一个屏幕,然后重复上面的操作,直到所有屏幕已完成设置. 如果后续屏幕不需要设置,可点击“退出并保存”按钮.保存后,进入下图所示页 ...

  2. 微信订阅号 获取用户基本信息，登录及 php

    <?php //echo file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cr ...

  3. Java语言利用Collections.sort对Map,List排序

    1.main方法包含TreeMap排序1,TreeMap排序2,HashMap排序,List<Integer>排序,List<Bean>排序,List<Map>排序 ...

  4. struts2的token interceptor

    关于struts2的token拦截器的说明 原理:struts2的token interceptor是关于重复提交的拦截器,其实现是:在form表单中加入token标签,如下: <form ac ...

  5. python字符串的格式化输出

    很多时候我们在打印输入内容时希望有简单格式而不是拼接 一般做法: name = input("name:").strip() age = input("age:" ...

  6. 【控制连接实现信息共享---linux和设备下ssh和远程连接telnet服务的简单搭建】

    SSH的配置 空密码登陆ssh server 如果要登录ssh server通常要在server和client之间采取具有共同加密的秘钥,若每次当client想要了:连接ssh server时都要手工 ...

  7. Delphi方法重载

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  8. pynlpir + pandas 文本分析

    pynlpir是中科院发布的一个分词系统,pandas(Python Data Analysis Library) 是python中一个常用的用来进行数据分析和统计的库,利用这两个库能够对中文文本数据 ...

  9. 网络基础,tpc,udp

    一 , 网络基础相关知识 1. 架构 (重点) C / S  架构 : client 客户端(APP) 和 server 服务器端 能充分发挥pc机的性能 B / S 架构 : browser 浏览器 ...

  10. RubyMine常用快捷键

    一级必会 Shift+F10:运行running Ctrl+Alt+R:弹出RakeCtrl+Alt+G:弹出GenerateCtrl+Alt+L:格式化代码Alt+F1:切换视图(Project, ...