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

使用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. c++stl应用入门

    在这篇中,我会讲几个简单易懂且比较常用的stl函数,这些函数在noip系列考试中往往被允许使用(既然让用我们自然不用手码了...) (末尾有惊喜!) 1.sort 绝大部分刚入门的oier第一个接触的 ...

  2. ABAP术语-ALE

    ALE 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/13/993351.html Application Link Enabling (A ...

  3. Laravel 集合的处理

    其中的方法有: $arrs = collect($arr)->collapse()->collapse() //去除最外一层数组,不论最外层数组时否有值,都会去除掉 collect($ar ...

  4. Java中的文件和stream流的操作代码

    1.Java中FileRead方法的运用代码及详解 package example2;import java.io.FileReader;import java.io.IOException;clas ...

  5. vue渲染自定义json数据

    <template> <div class="wrap"> <div class="main"> <div class ...

  6. 日志框架Log4j

    log4j是一个用Java编写的可靠,快速和灵活的日志框架(API),它在Apache软件许可下发布.Log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中. Log4j是 ...

  7. Hadoop(21)-数据清洗(ELT)简单版

    有一个诸如这样的log日志 去除长度不合法,并且状态码不正确的记录 LogBean package com.nty.elt; /** * author nty * date time 2018-12- ...

  8. 文件夹选项-安装功能-window服务

    我们初次使用windows10在显示一个文件的时候,可能不会将文件的扩展名显示出来,但是我们很多地方又需要更改文件的扩展名,打开文件的扩展名有两种方式 打开此电脑 ->>>点击右上方 ...

  9. js倒计时页面跳转

    HTML: <p><span id="timer">60</span>s 后跳转到百度首页</p> JS: //倒计时方法 func ...

  10. PHP HashTable总结

    本篇文章主要是对 PHP HashTable 总结,下面的参考链接是很好的学习资料. 总结 HashTable 又叫做散列表,是一种用于以常数平均时间执行插入.删除和查找的技术.不能有效的支持元素之间 ...