JavaScript에서 textRange 객체를 사용하는 방법 요약
- 伊谢尔伦원래의
- 2016-11-24 10:18:321307검색
TextRange 개체는 동적 HTML(DHTML)의 고급 기능으로 텍스트 검색 및 선택과 같은 다양한 텍스트 관련 작업을 수행하는 데 사용할 수 있습니다. 텍스트 범위를 사용하면 문서에서 문자, 단어 및 문장을 선택적으로 선택할 수 있습니다. TextRange 개체는 HTML 문서가 표시할 텍스트 스트림의 시작 및 끝 위치를 설정하는 추상 개체입니다.
다음은 일반적으로 사용되는 TextRange의 속성과 메서드입니다.
속성
boundingHeight TextRange 개체에 바인딩된 사각형의 높이를 가져옵니다.
boundingLeft 바인딩된 TextRange 객체를 가져옵니다. 직사각형의 왼쪽 가장자리와 포함하는 TextRange 객체의 왼쪽 사이의 거리
offsetLeft 레이아웃 또는 offsetParent에 의해 지정된 상위 좌표를 기준으로 객체의 계산된 왼쪽 위치를 가져옵니다. 속성
offsetTop 상대 객체를 가져옵니다. 레이아웃에서 계산된 상단 위치 또는 offsetParent 속성으로 지정된 상위 좌표를 가져옵니다.
htmlText TextRange 객체에 바인딩된 사각형의 너비를 가져옵니다.
text 범위에 포함된 텍스트를 설정하거나 가져옵니다.
Methods
moveStart는 범위의 시작 위치를 변경합니다.
moveEnd는 범위의 끝 위치를 변경합니다
collapse는 삽입 지점을 현재 범위의 시작이나 끝으로 이동합니다.
move 지정된 텍스트 범위를 축소하고 빈 범위를 지정된 단위 수만큼 이동합니다.
execCommand 다음에서 명령을 실행합니다. 현재 문서, 현재 선택 또는 주어진 범위
select 현재 선택을 현재 개체로 설정
findText는 텍스트 내의 텍스트를 검색하고 해당 개체를 둘러싸도록 범위의 시작 및 끝 지점을 설정합니다. 검색 문자열.
TextRange 개체를 사용하려면 일반적으로 세 가지 기본 단계가 필요합니다.
1. 텍스트 범위 만들기
2. 시작 및 끝 지점 설정
3.
<script language="javascript">
function moveCursor()
{
var temp = this.txtNum.value;
if(isNaN(temp))
{
alert("请输入一个数字");
return;
}
var rng = this.txtTest.createTextRange();
rng.move("character",temp);
rng.select();
}
</script>
</HEAD>
<BODY>
<input type="text" name="txtTest" value="明·罗贯中《三国演义》第二十一回 操曰:“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。" size="100"><br>
移动光标到第<input type="text" name="txtNum" size="5">个位置
<input type="button" name="btnMove" value="移动" onclick="moveCursor()">
</BODY>1.createTextRange()
TextRange 객체를 생성합니다. BODY, TEXT, TextArea, BUTTON 및 기타 요소는 모두 이 메서드를 지원합니다. 이 메서드는 TextRange 객체를 반환합니다.
2.move("Unit"[,count])
move() 메서드는 두 가지 작업을 수행합니다. 먼저, 현재 문서의 이전 끝점을 겹쳐서 이를 삽입점으로 사용하고, 다음으로 삽입점을 문자, 단어 또는 문장 단위만큼 앞뒤로 이동합니다.
메소드의 첫 번째 매개변수는 문자열이며, 지정하는 단위에는 문자(character), 단어(word), 문장(paragraph), textedit이 포함됩니다. textedit 값은 삽입 지점을 전체 텍스트 범위의 끝으로 이동합니다(매개변수 필요 없음). 처음 3개의 단위가 지정된 경우 매개변수가 무시되면 기본값은 1입니다. 단위 수를 나타내기 위해 정수 값을 지정할 수도 있습니다. 양수는 앞으로 이동을 나타내고 음수는 뒤로 이동을 나타냅니다.
move() 메서드가 실행된 후에도 범위가 여전히 겹치는 점에 유의하세요.
3.select()
select() 메소드는 현재 텍스트 범위 내의 텍스트를 선택합니다. 소위 "커서"를 이해할 수 있으므로 여기서 표시 커서도 구현해야 합니다. 경계가 겹치는 범위
<BODY>
<textarea name="txtBox" rows="7" cols="50" id="txtBox">
菊花台 (满城尽带黄金甲主题曲)
歌手：周杰伦 专辑：依然范特西
你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样
菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
</textarea><br>
<input type="text" value="输入要查询的内容" id="txtFind">
<input type="button" value="查找下一个" onclick="findText(txtFind.value)">
<script language="javascript">
var rng = txtBox.createTextRange();
function findText(str)
{
if(str=="")
return;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",txtBox.value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
//搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)
if(rng.text!=str)
{
alert("搜索完毕");
rng = txtBox.createTextRange();
}
}
</script>
</BODY>위의 예에서는 moveStart() 및 moveEne() 메서드를 사용하여 범위를 선택하는 방법을 보여줍니다. 나타나는 여러 메서드에 대한 설명은 다음과 같습니다.
4.moveStart("Unit "[,count]) 및 moveEnd("Unit"[,count])
moveStart() 및 moveEnd() 메서드는 기본적으로 move() 메서드와 유사합니다. , 시작점은 컨테이너의 첫 번째 문자입니다.
위의 selectText() 함수를 수정하여 증명할 수 있습니다.
function selectText()
{
var rng = txtBox.createTextRange();
rng.moveStart("character",1);
rng.moveEnd("character",-1);
rng.select();
}이동 시작점은 한 문자 앞으로, 끝점은 뒤로 한 문자 실행하면 선택된 범위가 첫 번째 문자와 마지막 문자를 제외한 전체 텍스트 범위임을 알 수 있습니다.
5.collapse([Boolean])
collapse() 메서드를 사용하면 현재 크기부터 문자 사이의 단일 삽입 지점까지 텍스트 범위를 겹칠 수 있습니다. Collapse() 메서드의 선택적 매개 변수는 범위가 현재 범위의 시작점 또는 끝점에서 겹치는지 여부를 나타내는 부울 값입니다. 기본값은 true이며 시작 지점에서 일치합니다.
6.findText("searchString"[,searchScope,flags])
TextRange 개체의 가장 유용한 메서드 중 하나는 다음과 같습니다. findText() 메서드의 기본 동작은 시작점부터 끝점까지 텍스트 범위를 찾아 대소문자를 구분하지 않는 문자열 일치를 검색하는 것입니다. 범위에서 인스턴스가 발견되면 범위의 시작점과 끝점이 이 텍스트에 배치되고 메서드는 true를 반환하고 그렇지 않으면 false를 반환하며 시작점과 끝점은 변경되지 않은 상태로 유지됩니다. 이 방법은 태그나 속성이 아닌 표시 텍스트만 검색합니다.
선택적 매개변수 searchScope는 시작점부터의 문자 수를 나타내는 정수 값입니다. 값이 클수록 검색 범위에 더 많은 텍스트가 포함되며, 음수 값은 검색 작업을 강제합니다. 현재 시작점에서 뒤로.
可选参数flag用来设置搜索是否区分大小写，或者是否仅匹配整个单词。参数是整数值，它用按位组合的数学方法计算单个值，这些值能容纳一个或多 个设置。匹配整个单词的值为2；匹配大小写的值为4；如果只想匹配一项，则只提供希望的值就够了，但对于两种行为，要用位操作XOR操作符(^操作符)使 值为6。
findText()方法最常用的应用包括范围中的查找和替换操作，以及格式化一个字符串的实例，因为搜索通常以范围的当前开始点开始，所以再次 查询要将开始点移到范围中匹配文本的末尾(如示例3)，移动后才能使findText()继续浏览剩下的文本范围，来查找另一个匹配。可以使用 collapse(false)方法迫使开始点移动第一个匹配的范围的结束点。所以示例3的findText()函数也可以修改为:
<script language="javascript">
var rng = txtBox.createTextRange();
function findText(str)
{
if(str=="")
return;
if(rng.findText(str))
{
rng.select();
rng.collapse(false);
}
//搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)
else
{
alert("搜索完毕");
rng = txtBox.createTextRange();
}
}
</script>6.parentElement()
parentElement()方法返回包含文本范围容器的引用
获得光标选中文本的DOM对象
<script>
function getParElem()
{
var rng = document.selection.createRange();
var container = rng.parentElement();
//alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type"));
alert(container.tagName);
}
</script>
</HEAD>
<BODY>
这是只属于Body的文本
<div>这是包含在div里的文本</div>
<p>这是包含在p里面的文本</p>
<div><strong>这是包含在div->strong里的文本</strong></div>
<input type="button" value="选择文本后点击" onClick="getParElem()">
</BODY>