javascript获取选中的文本/html
首先来谈一下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的更多相关文章
- jquery获取选中的文本和值
jquery获取选中的文本和值 1.说明 (1)获取select下拉框选中的索引 $("#selection").get(0).selectedIndex; (2)获取 ...
- Jquery获取选中的文本值
$(document).ready(function() { $(".contenttext").mouseup(function(e) { var txt; var parent ...
- JavaScript获取当前值
JavaScript获取当前值 1.说明 获取select下拉框中的选中的值以及文本值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- (获取选中的光标起始位置)EditText常用属性【三】:EditText选取操作
转自:http://blog.csdn.net/wirelessqa/article/details/8567702 话不多说,直接上码: activity_main.xml <ScrollVi ...
- Javascript获取select的选中值和选中文本(转载)
var obj = document.getElementById(”select_id”); //selectid var index = obj.selectedIndex; // 选中索引 va ...
- Javascript获取select下拉框选中的的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test" name=" ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- wpf ComboBox 获取选中项的文本内容
一:根据数据源类型获取选中项 类: public class Region { public int REGION_ID { get; set; } public string REGION_CODE ...
随机推荐
- php static 关键字在 函数中的用法
至于在类中声明为 static 的属性和方法,这里不描述php中的变量作用范围的另一个重要特性就是静态变量(static 变量).静态变量仅在局部函数域中存在且只被初始化一次,当程序执行离开此作用域时 ...
- sonar-maven-plugin问题
问题: jenkins本地构建时sonar报错 StackOverflow问题 [ERROR] Failed to execute goal org.codehaus.mojo:sonar-maven ...
- 包管理器Bower使用手册之一
包管理器Bower使用手册之一 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长前端的 ...
- hdu 1009 贪心算法
博主英语不好,看懂个大概,老鼠有M磅猫食.有N个房间,每个房间前有一只猫,房间里有老鼠最喜欢的食品JavaBean,J[i].若要引开猫,必须付出相应的猫食F[i]. 当然这只老鼠没必要每次都付出所有 ...
- Accessing Scoped Variables
To permit the JSP page to access the data, the servlet needs to use setAttribute to store the data i ...
- 哈希,哈希表,哈希Map
数组: 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1):数组的特点是:寻址容易,插入和删除困难: 链表: 链表存储区间离散,占用内存比较宽松,故空间复杂 ...
- bzoj 2806: [Ctsc2012]Cheat 后缀自动机DP
2806: [Ctsc2012]Cheat Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 583 Solved: 330[Submit][Statu ...
- Eclipse里初次使用Maven注意问题
在Eclipse里初次使用Maven,右键project->add dependency, 发现search不管用,这时候需要按照以下步骤操作: Goto "Preferences - ...
- C#中数据库连接的配置文件
在C#2010中,如何保存和访问数据库的连接字符串呢? 在Winform下要新增App.config文件,在Asp.net下要新增web.config文件. 1.打开配置文件添加相关代码后如下即可: ...
- Java 声明和访问控制(一) 数组的声明 private可以修饰类吗
数组的声明: int []a[] = new int[4][];//是正确的 int[] array = new int[2]{1,2};//是错误的 数组的长度是不可改变的,不能通过任何方式改变大小 ...