DOM-document.selection.createRange方法和TextRange对象

最新推荐文章于 2024-08-15 16:41:32 发布

Ned_mahone

最新推荐文章于 2024-08-15 16:41:32 发布

阅读量3.7k

点赞数

分类专栏： --Web_JavaScript --DOM

--Web_JavaScript 同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

--DOM

1 篇文章 0 订阅

订阅专栏

转自：http://blog.163.com/ruby_study/blog/static/238680065201611303416839/

IE提供了Selection对象和TextRange对象用于实现对被选择内容进行修改以及在指定区域中进行查找。

注：此对象应用于IE9版本以下，对于IE10及IE11，分别使用document.getSelection和window.getSelection来替换。（见 selection对象）

selection对象是document对象的一个子对象，该对象对应于用户在页面中所选择的区域。

selection对象的属性和方法定义如下:

type属性： 该属性为只读属性。
　　　当被选择区域包含文本或其他内容时，type属性返回值为"Text"，使用document.selection.createRange方法获得的是textRange；
　　　当被选择区域为元素控件组时，type属性值为“CONTROL"，使用document.selection.createRange方法获得的是controlRange；
　　　当被选择区域为空时，type属性返回值为"None"。

clear()方法: 该方法清除所选择区域的内容.

empty()方法: 该方法使selection对象为空,即取消选择,并将页面滚动到最顶部.

createRange()方法：从当前文本(text)选择区(selection)创建一个textRange对象，或者从一个控件(control)选择区(selection)创建一个controlRange集合(collection)。该方法基于用户当前所选择的区域创建TextRange对象,以对被选择区域进行进一步处理.

TextRange对象对应于页面中一个矩形区域,该对象可以用于处理页面中的任何内容.TextRange对象可以通过<body>,<button>,<textarea>,<input type="text">等元素的CreateTextRange()方法来创建,这样创建的区域起始于元素的起始标记. 例如:

var myTextRange = document.body.createTextRange() 创建的TextRange对象myTextRange对应的区域包含<body>和</body>标记之间的所有内容.

 TextRange对象也可以通过selection对象的CreateRange()方法基于当前被选择区域创建. 例如:

var myTextRange = document.selection.createRange() 基于用户所选择的区域创建TextRange对象.

TextRange对象的属性和方法定义如下：

htmlText属性: 对应于TextRange对象区域内的文本和HTML代码.该属性可读可写,可以通过对该属性赋新值来改变TextRange区域内的HTML代码内容.

Text属性: 对应于TextRange对象区域内的文本内容(忽略其中的HTML代码).该属性同样是可读可写的,可以通过Text属性赋新值的方法来改变TextRange区域内的文本内容.同htmlText属性不同的是,text属性不包含区域内的HTML代码. 例如: 对于代码

<body> This is the <strong> TextRange </strong> example;

</body>

var myTextRange = document.body.createTextRange();

</script>

所创建的TextRange对象,其中htmlText属性值为: 
  This is the <strong> TextRange </strong> example;
而text属性值为:
    This is the TextRange example;

expand()方法: 该方法用于扩展TextRange区域.扩展可以基于字符(character),单词(word),句子(sentence)或整个可编辑文本文本快(entire editable text range).当基于单词,句子或整个可编辑文本块进行扩展时,扩展后的TextRange对象将包含完整的单词,句子或者整个可编辑文本块. 例如:
如果当前TextRange对象对应的区域为:
    This is the TextRange example;    中灰色部分,即字符TextRa所对应部分,当使用expand()方法对该TextRange对象基于单词扩展:    myTextRange.expand("word");   扩展后,其所对应区域包含完整的单词"TextRange".  This is the TextRange example;

findText()方法: 该函数在TextRange对象对应区域中查找指定的文本内容,如果找到,则将找到的内容所在的区域赋于该TextRange对象. 例如:             myTextRange.findText("example") 将在TextRange对象myTextRange对应的区域中查找字符串"example"

scrollintoView()方法: 该方法使浏览器窗口滚动,是TextRange对象对应的区域可见,并处于浏览器窗口的最顶端.

select()方法: 使TextRange对象对应区域内容选中(处于高亮状态);并自动调用scrollintoView()方法,是TextRange对象对应区域可见,并位于浏览器顶端.

movie()方法: 该方法将TextRange对象对应区域向后移动若干个基本单位量.基本单位量可以是字符(character),单词(word),句子(sentence).使用该方法对TextRange对象区域进行移动后,TextRange对象对应区域的起点和终点将重合. 例如:             myTextRange("word",5) 将myTextRange区域起点向后移动5个单词,移动后,终点与起点重合在起点的新位置处.

moveEnd()方法: 将TextRange对象对应区域的终点移动若干个基本单位量,基本单位量同move()方法中相同,可取字符(character),单词(word)或句子(sentence). 例如:             myTextRange.moveEnd("word",3) 将myTextRange区域的终点向后移动3个单词.

movestart()方法: 将TextRange对象对应区域的起点移动若干个基本单位量.基本单位可取值同moveEnd()方法相同.

TextRange 对象

--------------------------------------------------------------------------------

成员表

下面的表格列出了 TextRange 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。

属性

属性	描述
boundingHeight	获取绑定 TextRange 对象的矩形的高度。
boundingLeft	获取绑定 TextRange 对象的矩形左边缘和包含 TextRange 对象的左侧之间的距离。
boundingTop	获取绑定 TextRange 对象的上边缘和包含 TextRange 对象的顶边之间的距离。
boundingWidth	Retrieves the width of the rectangle that bounds the TextRange object. htmlText获取绑定 TextRange 对象的矩形的宽度。
offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
text	设置或获取范围内包含的文本。

方法

方法	参数/值	描述
collapse		将插入点移动到当前范围的开始或结尾。
compareEndPoints		比较 TextRange 对象的结束点和其它范围的结束点。比较两个文本范围的开始和结束位置。该方法通过比较结束点来返回-1、 0 或者 1，分别表示第一个文本范围小于，等于或者大于第二个文本范围。
duplicate		返回 TextRange 的副本。
execCommand		在当前文档、当前选中区或给定范围上执行命令。
expand		扩展范围以便完全包含指定单位的范围。
findText		在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。
getBookmark		获取可用于使 moveToBookmark 返回相同范围的书签(白底字符串)。它返回一个不透明的独一无二的字符串来标明书签。（不透明意味着不可读或写），使用传入字符串的moveToBookmark 方法将来将文本范围移回创建时的开始和结束位置。
getBoundingClientRect		获取指定 TextRectangle 对象集合绑定的对象。
getClientRects		获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
inRange		返回一个范围是否被另一个范围包含。
isEqual		返回指定范围是否与当前范围相等。
move		折叠给定文本范围并将空范围移动给定单位数。
moveEnd		更改范围的结束位置。
moveStart		更改范围的开始位置。
moveToBookmark		移动到书签。
moveToElementText		移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。
moveToPoint		将文本范围的开始和结束位置移动到给定点。
parentElement		获取给定文本范围的父元素。
pasteHTML		将 HTML 文本粘贴入给定文本范围，替换范围内任何先前的文本和 HTML 元素。
queryCommandEnabled		返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 Boolean 值。
queryCommandIndeterm		返回表明指定命令是否处于模糊状态的 Boolean 值。
queryCommandState		返回表明命令当前状态的 Boolean 值。
queryCommandSupported		返回表明当前命令是否在当前区域上支持的 Boolean 值。
queryCommandValue		返回文档、范围或当前选中区对于给定命令的当前值。
scrollIntoView		将对象滚动到可见范围内，将其排列到窗口顶部或底部。
select		将当前选中区置为当前对象。
setEndPoint		根据其它范围的结束点设置某范围的结束点。