首先来谈一下Selection对象和Range对象。

  Selection是window.getSelection()方法返回的一个对象,用于表示用户选中的文本区域。Selection对象表现为一组Range对象。而Range对象表示文档的连续范围区域,例如用户在浏览器窗口中用鼠标拖动选中的区域。通常情况下,Selection对象只有一个Range对象,如下:

  var selectionObj = window.getSelection(); 

  var rangeObj = selectionObj.getRangeAt(0);

  selectionObj为Selection对象,rangeObj为Range对象。

  来个例子:

  var selectionObj = window.getSelection();

  var selectedText = selectionObj.toString();

  selectedText即为用户选中区域的文本。

  如果想获取选中部分的html代码,就需要用到Range对象的cloneContents方法,cloneContents方法把Range对象的内容复制到一个DocumentFragment对象。

    var selectionObj = window.getSelection();

    var rangeObj = selectionObj.getRangeAt(0);

    var docFragment = rangeObj.cloneContents();

  然后将docFragment渲染出来,获取其innerHTML即可。

    var testDiv = document.createElement("div");

    testDiv.appendChild(docFragment);

    var selectHtml = testDiv.innerHTML;

  selectedHtml即为用户选中区域的html代码 

  当然一如既往的,上述的吧啦吧啦对IE是不起作用的。IE自己玩自己的。。。

  IE中,通过document.selection创建Selection对象,通过createRange方法创建Range对象,如下:

    var selectionObj = document.selection;

    var rangeObj = selectionObj.createRange();

  range对象的text属性即为用户选中区域的文本,htmlText属性即为用户选中区域的html代码。

    var selectedText = rangeObj.text;

    var selectedHtml = rangeObj.htmlText;

  OK,上面说了这么一大推,来个具体的例子吧。

  html代码如下:

 javascript代码为:

   var testDiv = document.getElementById("testDiv");

   testDiv.onmouseup = function(){

     var selectionObj = null, rangeObj = null, selectedText = "", selectedHtml = "";

     if(window.getSelection){

       selectionObj = window.getSelection();

       selectedText = selectionObj.toString();

       rangeObj = selectionObj.getRangeAt(0);

       var docFragment = rangeObj.cloneContents();

         var tempDiv = document.createElement("div");

       tempDiv.appendChild(docFragment);

       selectedHtml = tempDiv.innerHTML;

     }else if(document.selection){

       selectionObj = document.selection;

       rangeObj = selectionObj.createRange();

       selectedText = rangeObj.text;

       selectedHtml = rangeObj.htmlText;

     }

     alert(selectedText);

     alert(selectedHtml);

   };

  

  webkit浏览器的运行结果如下:

    

  IE浏览器的运行结果如下:

     

javascript获取选中的文本/html的更多相关文章

  1. jquery获取选中的文本和值

    jquery获取选中的文本和值 1.说明 (1)获取select下拉框选中的索引       $("#selection").get(0).selectedIndex; (2)获取 ...

  2. Jquery获取选中的文本值

    $(document).ready(function() { $(".contenttext").mouseup(function(e) { var txt; var parent ...

  3. JavaScript获取当前值

    JavaScript获取当前值 1.说明        获取select下拉框中的选中的值以及文本值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. (获取选中的光标起始位置)EditText常用属性【三】:EditText选取操作

    转自:http://blog.csdn.net/wirelessqa/article/details/8567702 话不多说,直接上码: activity_main.xml <ScrollVi ...

  5. Javascript获取select的选中值和选中文本(转载)

    var obj = document.getElementById(”select_id”); //selectid var index = obj.selectedIndex; // 选中索引 va ...

  6. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  7. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  8. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  9. wpf ComboBox 获取选中项的文本内容

    一:根据数据源类型获取选中项 类: public class Region { public int REGION_ID { get; set; } public string REGION_CODE ...

随机推荐

  1. SQL Join(连接查询)

    1.连接查询分为: inner join(自然连接,自连接) Left join(左连接)/Left outer join(左外连接):效果一样 Right join(右连接)/Right outer ...

  2. Git中的fetch和pull

    http://blog.haohtml.com/archives/12674 Git中从远程的分支获取最新的版本到本地有这样2个命令: 1. git fetch:相当于是从远程获取最新版本到本地,不会 ...

  3. [简历] PHP 技能关键字列表

    本技能关键字列表是从最近招聘PHP的数百份JD中统计出来的,括号中是出现的词频.如果你的简历要投递给有机器(简历分选系统)和不如机器(不懂技术的HR)筛选简历环节的地方,请一定从下边高频关键词中选择5 ...

  4. iBatis系列之三

    iBatis和Hibernate最大差别就是在于iBatis没有严格的和具体的表做关联:而是将结果集和DAO做关联. iBatis的SqlConfig.xml配置一个properties文件,其实可以 ...

  5. 单片微机原理P0:80C51结构原理

    本来我真的不想让51的东西出现在我的博客上的,因为51这种东西真的太low了,学了最多就所谓的垃圾科创利用一下,但是想一下这门课我也要考试,还是写一点东西顺便放博客上吧. 这一系列主要参考<单片 ...

  6. 【转】WPF中Binding的技巧(一)

    WPF中Binding的技巧(一)   在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到 ...

  7. ubuntu14.04下unix网络编程环境的配置

    建议 unpv13e/README看一下,忽略一下内容 ===================================================================== 操作 ...

  8. Python Web 性能和压力测试 multi-mechanize

    http://www.aikaiyuan.com/5318.html 对Web服务做Performance & Load测试,最常见的工具有Apache Benchmark俗称ab和商用工具L ...

  9. 如何解决C#编译中"csc不是内部或外部命令"的问题

    安装完 VisualStudio 2010编译环境后,是不能用命令行直接编译写好的csc文件的,如果不配置环境变量,在命令提示符(cmd)中编译扩展名为cs的文件,会出现错误提示“csc不是内部或外部 ...

  10. oracle的sqlnet.ora , tnsnames.ora , Listener.ora 文件的作用(转)

    oracle网络配置三个配置文件 listener.ora.sqlnet.ora.tnsnames.ora ,都是放在$ORACLE_HOME/network/admin目录下.1. sqlnet.o ...