setEndPoint

转自:http://qm1937.blog.163.com/blog/static/48317095201131101137707/


<html xmlns="http://www.w3.org/1999/xhtml">

<head><TITLE>xxx</TITLE>

<script language=JavaScript>

//选中行去除一个缩进==============

function selDelTab()

{

    var str=new Array();

    var slct=document.selection.createRange();

    var rng=slct;//【为了保持选区】

    var r1=rng.duplicate();//【为了保持选区】克隆

        

    r1.expand("textedit"); //【为了保持选区】r1扩展到全部编辑区域

    var r2=r1.duplicate();//【为了保持选区】r2也涵盖全部编辑区域

    alert("r2==="+r2.text);

    r1.setEndPoint("EndToStart",rng);//【为了保持选区】r1的开始端不动,r1的结尾放到rng的开始

    alert("r1=="+r1.text);

    r2.setEndPoint("StartToEnd",rng);//【为了保持选区】r1的结尾端不动,r2的开始放到rng的结尾

    var str=slct.text.split("\n");

    var tmp='';

    for(i=0;i<str.length;i++)

    {

    tmp=tmp + str[i].replace(/^\t(.*)/,'$1') + '\n';

    }

    slct.text=tmp.replace(/[\n\n]$/gm,'');//replace去除空白行

    r1.setEndPoint("StartToStart",r2);//【为了保持选区】r1的结尾端不动,r1的开始放到r2的开始

    r1.select();//【为了保持选区】

}

</script>

</head>

<body >

<div id=edt>

<input id=p1 type=button value=←选中行缩进处理 style="font-size:12px;display:inline" οnclick="selDelTab();">

<textarea id=txt rows=22 cols=120 >

        上卷    1

        绪论    1

        世界经济史的研究对象和基本内容    2

        世界经济史的分期    6

        研究世界经济史的意义    13

        第一篇 资本主义生产方式确立世界经济体系形成(16世纪~19世纪60年代)    21

        第一章 西欧封建社会末期资本主义关系的产生和地理大发现    21

        第一节 西欧封建社会末期经济的发展和资本主义关系的出现    21

</textarea>

</div>

</body>

</html>

===============计算光标的位置,这里不包括表格,图片==================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>

 <BODY>

  <div   nowrap   CONTENTEDITABLE   οnmοuseup="getCursorPos();">123456789</div>  

  <script>  

          function   getCursorPos(){  

                  var   pos=-1;  

                  var   sText=document.selection.createRange();

                  alert(sText.text);

                  var   tempText=document.body.createTextRange();;  

                  sText.select();  

                  tempText.setEndPoint("EndToStart",sText);  

                  pos=tempText.text.length;  

                  alert(pos);  

          }  

  </script>

 </BODY>

</HTML>

=====================================================

理解setEndPoint方法

今天在修改控件时,使用到了setEndPoint方法,查找了MSDN,自己测试了一下,总结了该方法的使用,供大家分享。

MSDN上的解释是:

Sets the endpoint of one range based on the endpoint of another range.

表面意思是:在另一个range的endpoint基础上设置某个range的endpoint.

基本概念:

A text range has two endpoints: one at the beginning of the text range and one at the end. An endpoint can also be the position between two characters in an HTML document.

一个text range包含两个endpoints,一个在text range的开头,另一个在text range的末尾。一个endpoint也可以在HTML文档的两个字符之间。

Syntax:

TextRange.setEndPoint(sType, oTextRange)

Parameters

sType

Required. String that specifies the endpoint to transfer using one of the following values.

StartToEnd

Move the start of the TextRange object to the end of the specified oTextRange parameter.

StartToStart

Move the start of the TextRange object to the start of the specified oTextRange parameter.

EndToStart

Move the end of the TextRange object to the start of the specified oTextRange parameter.

EndToEnd

Move the end of the TextRange object to the end of the specified oTextRange parameter.

oTextRange

Required. TextRange object from which the source endpoint is to be taken.

Return Value

No return value.

举例:

//123被选中

var workRange=document.selection.createRange();

var allRange=obj.createTextRange();//obj指代文本框实例

情况一:

workRange.setEndPoint("StartToStart",allRange);

workRange.text => 0123

情况二:

workRange.setEndPoint("EndToStart",allRange);

workRange.text => 0

情况三:

workRange.setEndPoint("StartToEnd",allRange);

workRange.text => 456789

情况四:

workRange.setEndPoint("EndToEnd",allRange);

workRange.text => 123456789

解释:

情况一:

workRange.text初始值为123,两个endpoints分别位于0和1之间、3和4之间。我们简称0和1之间的endpoint为epStart,3和4之间的endpoint为epEnd,理解执行结果的核心是理解workRange.setEndPoint方法的第一个参数。同时,我们需要理解的一点就是allRange也存在两个endpoints,分别位于0之前、9之后。我们简称这两个endpoints分别为allRange_epStart和allRange_epEnd。

“StartToStart”英文解释是:Move the start of the TextRange object to the end of the specified oTextRange parameter.

在本例中,也就是指:将workRange的epStart移动到allRange的allRange_epStart,那么workRange的文本变为allRange_epStart到epEnd范围之间。AllRange_epStart成为了workRange的epStart。情况二、三、四的解释类似,就不啰唆了。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值