DHTML －－TextRange对象的使用

最新推荐文章于 2022-06-16 10:53:47 发布

xiaoxiaohai123

最新推荐文章于 2022-06-16 10:53:47 发布

阅读量703

点赞数

分类专栏： javacript html 文章标签： microsoft 文档 html button java internet

javacript 同时被 2 个专栏收录

121 篇文章 0 订阅

订阅专栏

html

70 篇文章 0 订阅

订阅专栏

使用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文档：

Java代码

<HTML>
<BODY>
<H1>Welcome</H1>
<CENTER><H2>Overview<H2></CENTER>
<P>Be sure to <B>Refresh</B> this page.</P>
</BODY>
</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对象可以包含的整个可能部分）。

Java代码

<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 οnclick=selectMe()>Click on a word and it will highlight</H1>
</BODY>
</HTML>

 
<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 οnclick=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 and parentTextEdit是不同阶层的方法，如果您的文档上包含一个TEXTAREA，那么body的createTextRange 将不能找到用户当前点击的位置。以下上面代码的改进版以处理这重情况：

Java代码

<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>

<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 命令来将文本该为粗体：

Java代码

var rng = document.body.createTextRange();
rng.collapse();
rng.expand("sentence");
rng.execCommand("Bold");

var rng = document.body.createTextRange();  
rng.collapse();  
rng.expand("sentence");  
rng.execCommand("Bold");

以上例子将页面上所有文本转化为粗体。

并不是每次每个命令都可用，您可以使用queryCommandEnabled 和queryCommandSupported 方法来测试对于特定的文本范围一个命令是否有用。

为了测试一个特定命令是否已经被一个文本范围运用，可用使用queryCommandState 方法取得该命令的状态。如果以用则该状态为真。

xiaoxiaohai123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML －－TextRange对象的使用

使用TextRange对象一对于文本处理，许多用户都只使用the innerText/innerHTML 和 outerText/outerHTML 属性和它的相关方法，然而使用文本范围对象将有许多高级的文本操作。TextRange对象可以如下使用： 1、定位给定元素或给定点的文本 2、在文档字符里查找单词或字符 3、移动逻辑单元里的文本 4、提供文档里平常的文本或HTML文本读/写
复制链接

扫一扫