Range对象

Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域。
 
dom标准Range对象
在IE中使用TextRange对象
range对象常用的建立方法在开发中除了上述文档中的标准建立方法,大多如下方式建立
 
标准dom:
var range=window.getSelection().getRangeAt(0);
IE:
var range=document.selection.createRange();
注意:标准dom是从window中获取selection对象,而ie是从document对象中获取。
 
标准dom range对象(以下称dom rang)和IE的TextRange对象(以下称TextRange),在操作模式上有很大区别,可以说dom range是基于dom结构控制的,TextRange是基于文本节点字节控制的,阅读下面示例会更好理解这二者的操作模式。以下所说的range对象是指在html结构中进行选择和更改(designMode=on contentEditable=true状态下)操作,在textarea中的操作比这简单,不是当前的研究环境。
range对象的具体方法和属性请查看上边列出的相关api文档,下面对实际开发过程中常用功能讲解

1.区域选择 获取区域中文本

TextRange的区域选择
TextRange对象主要使用以下方法控制区域的选择:moveStart moveEnd move
这三个函数使用相同的参数语法:fn(sUnit [, iCount])
第一个参数是指移动的单位,可以使用的参数:character(字符)、word(词)、sentence(段落)、textedit(整个编辑区)
第二个参数指移动的数量单位,负数向所在位置之前移动,正数向所在位置之后移动。
在实际开发中一般使用character,其他几个参数在中文环境和html编辑时,和预想位置有偏差。
 
例1:TextRange选择光标前4个字符
代码如下:
var rg=document.selection.createRange();
rg.moveStart("character",-);
rg.select();//显式选择文本区域,不调用此函数也可以获得选择的内容
var text=rg.text;//获得选择的文本
var htmlText=rg.htmlText;//获得选择文本的html代码
其他常用位置控制函数:
  collapse: 合并前后选择点,true为开始点,false为结尾点。
  moveToPoint: 移动光标到坐标 moveToBookmark: 移动到书签。
 
dom range的区域选择
dom range对象选择区域主要以dom节点为为坐标,所有边界移动和区域选择函数都是以dom节点为参照的
setEnd()setStart()是控制范围的前边界点和后边界点位置的函数,
有两个参数,第一个参数是dom节点,第二个参数是偏移量,这个参数和TextRange.move中不同,是相对于dom节点的偏移量。
如:有文字节点node1 nodeValue是aaabbbccc,setStart(node1,3)则设置开始位置在字符a、b之间
那如何像例1一样选择光标前4个字符呢,这需要了解dom range对象的几个属性:
  endContainer 包含范围的结束点的 dom节点。
  endOffset endContainer 中的结束点位置。
  startContainer 包含范围的开始点的 dom节点。
  startOffset startContainer 中的开始点位置。
例2:dom range选择光标前4个字符
代码如下:
var rg=window.getSelection().getRangeAt();
rg.setStart(rg.startContainer,rg.startOffset-);//获得当前range strat所在节点和偏移量,计算后作为参数
//在调用setStart后即显式选择,与TextRange不同
var text=rg.toString();//获得选择文本
rg.collapse(false);//collapse函数与TextRange.collapse相同
例2中range选择范围操作适用于单一的文本内容,如果是html内容就需要进一步计算才能正确得到,总的来看dom range在复杂dom结 构中进行相对范围选择是比较麻烦的。
另外,dom range没有直接的方法获得选择内容的html代码。在html可编辑状态下可以通过surroundContents()方法用一个span之类的标签包裹住内容后再通过innerHTML获得内容,但是在选择范围边界点在html开始和结束标签内时(如:<a>123</a>边界点在a标签内)会抛出一个异常。

2.插入文本

TextRange插入文本
使用TextRang插入文本比较简单,直接调用pasteHTML()方法就可以直接插入html代码。
 
Dom Range插入文本
使用Dom Range插入文本相对复杂一些,Dom Range对象使用insertNode()方法实现插入,但是insertNode是在Range的开始位置插入一 个节点,参数是一个节点而不是字符串,我们可以通过插入文本节点实现,如果使用document.createTextNode建立文本节点,文本中的HTML标记会自动转换,但空格是个特例,并不会自动转换为 ,这使我在开发代码缩进时很头疼,最后解决的办法,是使用Rang.createContextualFragment,这个方法虽然在文档中没有找到,但测试多个浏览器都支持此方法,此方法返回的是一个DocumentFragment对象。

3.替换

综合介绍的选择和插入的方法可完成替换功能,TextRange比较简单pasteHTML方法会替换原来Range选中的文本,Dom Range的insertNode不会删除原range选中内容,需要调用deleteContents()方法先删除选择内容。

XML DOM - Range 对象的更多相关文章

  1. JS 之DOM range对象

    DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...

  2. XML DOM(Document Object Model)

    1.XML DOM 是用于获取.更改.添加或删除 XML 元素的标准.2.节点(XML 文档中的每个成分都是一个节点):        整个文档是一个文档节点:        每个XML元素是一个元素 ...

  3. htm Dom对象与 Xml Dom对象的理解

    html 是基于Xml的文档规范.是一种特殊的xml文档,这一点很重要 1.xml 文档的操作,java,c#,...各种语言都提供了很好的api对文档进行解析,操作.当然js 也不例外,提供了一系列 ...

  4. Javascript 解析字符串生成 XML DOM 对象。

    Javascript 接收字符串生成 XML DOM 对象.实测对 Firefox .IE6 有效.可用于解析 ajax 的服务器响应结果,也可用于解析自定义字符串.​1. [代码]函数   ppt模 ...

  5. js ajax 传送xml dom对象到服务器

    客户端代码 1 <script> var isie = true; var xmlhttp = null; function createXMLHTTP() {//创建XMLXMLHttp ...

  6. getSelection、range 对象属性,方法理解,解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  7. Range对象理解,浏览器兼容性,获取鼠标光标位置

    一.关于浏览器的兼容性 目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange 关于这三种的区别,请查看文档 http ...

  8. python 解析XML python模块xml.dom解析xml实例代码

    分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html ...

  9. python 应用xml.dom.minidom读xml

    xml文件 <?xml version="1.0" encoding="utf-8"?> <city> <name>上海&l ...

随机推荐

  1. tfboys——tensorflow模块学习(二)

    tf.contrib模块 tf.contrib 模块是一个比较复杂的模块. contrib细节: tf.contrib.bayesflow.entropy  香农信息论 tf.contrib.baye ...

  2. Oracle处理Clob类型数据入库(String入库)

    从网上查找一堆参考,要么语焉不详,要么不可行.自己鼓捣了一堆可以正常入库了.请看最后: insert into CP_V_INFO" + "(ID, "+ "P ...

  3. Python基础(13)_python模块之re模块(正则表达式)

    8.re模块:正则表达式 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节 ...

  4. JQuery 评分系统

              评分: ☆ ☆ ☆ ☆ ☆ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  5. VC引用动态库

    1. 程序所在目录 2. 进程当前目录 3. 系统目录(C:\WINDOWS\System32) 4. Windows目录(C:\WINDOWS) 5. PATH环境变量指向的目录

  6. java 断言工具类

    1.断言工具类 package com.sze.redis.util; import java.util.Collection; import java.util.Map; import com.sz ...

  7. 获取电脑连接WiFi的信息

    在cmd中执行如下命令,即可查看到所有连接过的WiFi信息 for /f "skip=9 tokens=1,2 delims=:" %i in ('netsh wlan show ...

  8. uart测试代码

    #include <stdio.h> /*标准输入输出定义*/ #include <stdlib.h> /*标准函数库定义*/ #include <unistd.h> ...

  9. 基于SSM的单点登陆03

    TbUser.java和TbUserExample.java,TbUserMapper.java,TbUserMapper.xml由mybatis框架生成. generatorConfig.xml & ...

  10. INSPIRED启示录 读书笔记 - 第38章 打造企业级产品的经验

    十大要点 1.可用性:很少有企业开发这类软件时会进行交互设计.视觉设计.可用性测试,因此产品才会表现得如此糟糕 2.产品正常工作:多数企业级产品根本没法使用,或者还需花大量的时间和资金开发临时补丁,产 ...