使用TextRange对象一
对于文本处理,许多用户都只使用the innerText/innerHTML 和 outerText/outerHTML 属性和它的相关方法,然而使用文本范围对象将有许多高级的文本操作。TextRange对象可以如下使用:
1、定位给定元素或给定点的文本
2、在文档字符里查找单词或字符
3、移动逻辑单元里的文本
4、提供文档里平常的文本或HTML文本读/写 访问
在非微软WIN32平台,该可能没有该特性,关于Microsoft@ Internet Explorer 平台交互能力,请查看微软知识基地库的文章Q172976
使用TextRange对象二
——TextRange概述
TextRange
对象是
动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的有用的任务,象搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文
档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。考虑以下简单的HTML文档:
<HTML>
<BODY>
<H1>Welcome</H1>
<CENTER><H2>Overview<H2></CENTER>
<P>Be sure to <B>Refresh</B> this page.</P>
</BODY>
</HTML>
在该文档中,建立一个在BODY元素上的TextRange对象将会在body的内容文本的开始定位开始位置,在body内容文本的结束位
置定位结束位置,该TextRange 对象将包含的文本是“Welcome Overview Be Sure to Refresh this
page."
使用TextRange对象我们可以做什么?
用TextRange对象处理文本分两个部分。首先建立
一个文本范围,用它的开始和结束位置来封装需要的文本。第二个步骤对该文本范围使用某一方法,或者将该文本做个拷贝以在文本的其他地方使用它,一旦文本范
围被定位好,您可以查找文本,选择文本和拷贝文本以在文档的其他地方使用。
定位TextRange对象
每个文本范围都有一个开始和结束位置来定位TextRange对象封装的文本范围。当你创建一个新的 文本范围,开始和结束位置缺省封装了整个的文本内容。使用move、 moveStart和 moveEnd 方法可以改变文本范围的范围。
还
有别的方法可以将TextRange对象放置在别的特定的元素上,或者定位在整个页面。例如,moveToElementText
能够定位文本范围封装给定元素的包含文本。moveToPoint
可以将文本范围定位在用户鼠标点击的点上。用户点击的x和y坐标通过window.event
对象取得,您可以用它们来将范围定位在给定的点上,从这个爆破点,您可以将范围扩大到封装一个单词(word)、句子(sentence)、整个可编辑文
本(textEdit)(TextRange对象可以包含的整个可能部分)。
<HTML><HEAD>
<TITLE>moveToPoint Example</TITLE>
<script>
function selectMe() {
var r=document.body.createTextRange();
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
r.select(); }
</script>
</HEAD>
<BODY>
<H1 id=myH1 onclick=selectMe()>Click on a word and it will highlight</H1>
</BODY></HTML>
您可以使用body对象、TEXTAREA,或者BUTTON 元素的createTextRange方法
来创建TextRange.您也可以从用户的选择模式上建立一个文本范围,selection 对象的createRange
将返回一个文本范围。您可以想使用createTextRange.创建的范围一样使用该范围的方法、属性。
创建body范围的
TextRange对象将不包含 TEXTAREA 和 BUTTON 的内容。相反的,您不可以通过改变基于TEXTAREA 和 BUTTON
的文本范围的开始和结束位置来将范围扩大到该特定元素以外的范围去。使用每个元素提供的属性, isTextEdit和
parentTextEdit是不同阶层的方法,如果您的文档上包含一个TEXTAREA,那么body的createTextRange
将不能找到用户当前点击的位置。以下上面代码的改进版以处理这重情况:
<HTML><HEAD>
<TITLE>moveToPoint Example</TITLE>
<script for=document event=onclick>
var r
if(window.event.srcElement.isTextEdit)
{
r=window.event.srcElement.createTextRange(); }
else{
var el=window.event.srcElement.parentTextEdit;
r=el.createTextRange(); }
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
r.select();
</script>
</HEAD>
<BODY>
<H1 id=myH1>Click on a word and it will highlight</H1>
<TEXTAREA>
There's text in this element too that you could click on
</TEXTAREA>
</BODY></HTML>
使用TextRange对象三
——取得TextRange内容
TextRange对象的内容可以通过TextRange的 text 和 htmlText属性来查看。text属性的和元素对象的innerText 属性类似的读/写属性,唯一的不同是这里是封装在TextRange 对象里。
TextRange
对象的htmlText属性是只读属性,可以用它来检查TextRange对象开始和结束位置之间的HTML代码。可以使用pasteHTML
方法来向文本范围中添加HTML内容。尽管您可以添加任何您想添加的HTML内容到文本范围里,但是 pasteHTML
方法并不从属文档的层次结构。就想innerHTML 和 outerHTML 属性,尽管在文本范围内加入不正确或不恰当的标签时pasteHTML
方法不会失败,但是文档显示出来的并不象您所期待的那样。如果您粘贴了一些代码片段,这些片段将会自动关闭以防止影响随后的文本或元素。例如,这意味着,
如果您的脚本原来于在 document对象的all
集合。那么在调用pasteHTML方法以后,那么document.all集合的sourceIndex 将定位在不同的元素上。
使用TextRange对象四
——比较范围
您
一次可以建立多个文本范围,独立的使用它们。同时访问同一元素的不同部分。 您也可以使用duplicate
方法拷贝一个文本范围。如果您想暂时访问原始范围的一部分而由不想重新创建或另存原始范围时,这非常有用。您可以使用isEqual 和
inRange方法来决定一个文本范围和另一文本范围的关系。
因为对象模式不能携带文本范围,任何时候控制发生然后重新进入代码时,
您都必须重新创建文本范围。例如,一个被事件处理创建的文本范围,在事件处理返回时被抛弃。您可以使用inRange
方法来测定一个文本范围是否整个被包含在另一文本范围内。使用isEqual
方法来测定两个文本范围是否相等。如果文本范围的开始和结束定位在相同位置,那么两个文本范围相等。注意两个相等的文本范围被认为相互包含在另一个里,也
就是任何一个的inRange方法返回真。
您可以使用setEndPoint来设置设置开始或结束位置来和另一个文本范围匹配。该方法有两个参数:一个字符串,表明要传送的结束点,源文本范围将要将结束点设置到它的结束点的文本范围。
r1.setEndPoint( "StartToEnd", r2 )
您也可是使用 "StartToStart"、 "EndToStart" 和 “EndToEnd" 来设置结束点。
您可以使用 compareEndPoints 方法来比较两个文本范围的开始和结束位置。该方法通过比较结束点来返回-1、 0 或者 1,分别表示第一个文本范围 小于,等于或者大于第二个文本范围。
书
签很容易保存一个文本范围的开始和结束位置,并且在您需要它的时候可以马上恢复这些位置。您可以创建一个通过getBookmark
方法取得文本范围的,它返回一个不透明的独一无二的字符串来标明书签。(不透明意味着不可读或写),使用传入字符串的moveToBookmark
方法将来将文本范围移回创建时的开始和结束位置。
使用TextRange对象五
——命令
您可以使用命令来给文本范围的文本携带格式和特定的动作。您可以使用execCommand方法来执行命令。您需要提供命令名,和要相应的参数。例如,在Microsoft JScript 中,您可以象如下那样使用 Bold 命令来将文本 该为粗体:
var rng = document.body.createTextRange();
rng.collapse();
rng.expand("sentence");
rng.execCommand("Bold");
以上例子将页面上所有文本转化为粗体。
并不是每次每个命令都可用,您可以使用queryCommandEnabled 和queryCommandSupported 方法来测试对于特定的文本范围一个命令是否有用。
为了测试一个特定命令是否已经被一个文本范围运用,可用使用queryCommandState 方法取得该命令的状态。如果以用则该状态为真。
分享到:
相关推荐
IE提供了Selection对象和TextRange对象用于实现对被选择内容进行修改以及在指定区域中进行查找.
TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流...
因用户要求方与TextRange对象结缘,用于处理JavaScript对象文本部分内容的一个对象。 TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的...
TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在...
TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在...
这是一个给新手学习代码的帖子,包含以下内容: 如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷键操作,如何自动随窗口大小调整页面内容尺寸,正则表达式的使用等等 请仔细...
开发的功能主要涉及即时... dom标准Range对象 http://www.w3school.com.cn/xmldom/dom_range.asp 在ie中使用TextRange对象 http://www.hbcms.com/main/dhtml/objects/obj_textrange.html range对象常用的建立方法 在开
19.3.3 TextRange对象739 19.3.4表格对象741 19.4 DHTMLPage设计器742 19.4.1 DHTMLPage设计器742 19.4.2 DHTML元素编程744 19.4.3 DHTML应用程序748 19.5远程数据服务758 19.5.1 DHTML数据绑定758 19.5.2使用RDS...
19.3.3 TextRange对象739 19.3.4表格对象741 19.4 DHTMLPage设计器742 19.4.1 DHTMLPage设计器742 19.4.2 DHTML元素编程744 19.4.3 DHTML应用程序748 19.5远程数据服务758 19.5.1 DHTML数据绑定758 19.5.2使用RDS...
关于setEndPoint msdn给出的参考是: TextRange.setEndPoint(sType, oTextRange) oTextRange 是另一个TextRange对象 sType是字符串类型 有4种选择 StartToEnd StartToStart EndToStart EndToEnd “A text ...
在Msdn中发现只有Body、TextArea等对象支持createTextRange()方法,继续在msdn中仔细查阅了一下,createTextRange()返回的是一个 TextRange 对象,继续查阅 TextRange 对象,发现其有很多方法,先试了试findText...
本文实例讲述了javascript实现简单查找与替换的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> ... // 创建TextRange对象,指定为整个body区域 var myText = document.bo
我们可以利用 document.selection.type 来判断当前选中的是文本还是对象。 document.selection.type 返回三个值 “None” “Text” “Control” 只有当返回值是 Text 时,创建的textRange才是有效的。
非IE浏览器,如,firefox,chrome,支持 selectionStart 获取选中区域的起点,而IE浏览器不支持该属性,需要间接通过TextRange来获得,利用TextRange对象的compareEndPoints方法来进行起点的比较可以实现。...