JS Range HTML文档/文字内容选中、库及应用介绍

一、前面的些话
本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意，可以让你选择HTML文档的任意部分，并可以拿这些选择的信息做你想做的事情。其中，最常见的Range是用户用鼠标选择的内容(user selection)。

本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。

二、什么是Range？
所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。

例如下面这个模样的例子：

2011-04-12 
负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。

上面选中状态的那些文字就可以转换成Range对象（下面会详细讲述）。通过Range对象你可以找到Range的起始点和结束点，如果你实在有心，还可以删除或是复制这些内容，或是用其他文字替换，甚至是简单的HTML。

上面的例子可以说是最简单的Range对象的例子，因为其只包含了文字。而实际上，Range对象也是可以包含HTML代码内容的，例如下面这个示例：

<time>2011-04-12</time> 
<p>据日本广播协会电视台12日报道，日本经济产业省原子能安全保安院决定将福岛第一核电站核泄漏事故等级提高至7级。这使日本核泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> 
<p>负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。</p>

同样的，Range对象被创建，且包含HTML，现在的问题是选择的内容正好跨过了楚河和汉界（跨标签），如果就单纯的论选择的内容的话，应该如下：

泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> 
<p>负责调查切尔诺贝

显然，上面的HTML属于1级残废，基本无效。然而幸运的是，所有的浏览器都会自动调整HTML片段使其有效，就像变成下面这样：

<p>泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> 
<p>负责调查切尔诺贝</p>

可以看到，浏览器自动补全了一定数目的HTML来让Range有效。如果你复制或是移动Range，你所复制或移动的HTML内容一定是有效的。

如果您看到下面的文字，可能是由于在其他网站或是RSS中阅读本文，本文原地址：http://www.zhangxinxu.com/wordpress/?p=1591，本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。

三、浏览器的兼容性

在真正操刀JavaScript之前我们需要大致知道Range对象的浏览器兼容性情况。实际上，问题是比较麻烦的，因为至少有3种类似Range对象，且你有必要全部理解。先展示详细的兼容性情况表：

支持：不支持：部分支持：

1. W3C Range

W3C Range

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
cloneContents()
cloneRange()
collapse()	tbd	tbd	tbd	tbd
collapsed
commonAncestorContainer
compareBoundaryPoints()
comparePoint() – Mozilla 扩展
createContextualFragment() – Mozilla 扩展
deleteContents()
detach()
endContainer		< 上一篇 JQuery将文本转化成JSON对象需要注意的问题 下一篇 > 通过Jscript中@cc_on 语句识别IE浏览器及版本的代码 人气教程排行 213次 1 vue2 设置router-view默认路径的实例 213次 2 Vue-路由导航菜单栏的高亮设置方法 213次 3 基于Axios 常用的请求方法别名(详解) 213次 4 JavaScript+canvas实现七色板效果实例 212次 5 实现vuex的初始化方法 212次 6 jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决 212次 7 Array.slice()与Array.splice()的返回值类型_基础知识 212次 8 微信小程序使用swiper组件实现层叠轮播图 212次 9 element-ui 限制日期选择的方法(datepicker) 212次 10 vue-baidu-map 进入页面自动定位的解决方案(推荐) 212次 11 JS实现元素上下左右移动效果 212次 12 node.js中的emitter.on方法使用说明 211次 13 在js中如何实现图片左右滑动 211次 14 layui button 按钮弹出提示窗口,确定才进行的方法 211次 15 深入理解Vue生命周期、手动挂载及挂载子组件 211次 16 JS 使用for循环遍历子节点查找元素 210次 17 bootstrap如何设置表单必填 210次 18 bootstrap4兼容哪些浏览器 210次 19 jQuery实现追加数组并去重功能 210次 20 jQuery实现的在线答题功能_jquery 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！ 登录   记住我的登录 忘记密码？ 登录 我已阅读用户协议及版权声明 注册