简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der Verwendung des textRange-Objekts in JavaScript

Zusammenfassung der Verwendung des textRange-Objekts in JavaScript

伊谢尔伦
伊谢尔伦Original
2016-11-24 10:18:321307Durchsuche

Das TextRange-Objekt ist eine erweiterte Funktion von dynamischem HTML (DHTML). Es kann für viele textbezogene Aufgaben wie das Suchen und Auswählen von Text verwendet werden. Mit Textbereichen können Sie Zeichen, Wörter und Sätze gezielt aus einem Dokument auswählen. Das TextRange-Objekt ist ein abstraktes Objekt, das die Start- und Endpositionen im Textstrom festlegt, die im HTML-Dokument angezeigt werden.

Im Folgenden sind die häufig verwendeten Eigenschaften und Methoden von TextRange aufgeführt:

Eigenschaft

boundingHeight Ruft die Höhe des Rechtecks ​​ab, das an das TextRange-Objekt

boundingLeft gebunden ist Ruft das gebundene TextRange-Objekt ab. Der Abstand zwischen dem linken Rand des Rechtecks ​​und der linken Seite des enthaltenden TextRange-Objekts.

offsetLeft Ruft die berechnete linke Position des Objekts relativ zum Layout oder der durch offsetParent angegebenen übergeordneten Koordinate ab Eigenschaft

offsetTop Ruft das Objekt relativ ab. Die berechnete obere Position im Layout oder die durch das offsetParent-Attribut angegebene übergeordnete Koordinate.

htmlText Ruft die Breite des Rechtecks ​​ab, das an das TextRange-Objekt

text Legt den im Bereich enthaltenen Text fest oder ruft ihn ab

Methoden

moveStart ändert die Startposition des Bereichs

moveEnd ändert die Endposition des Bereichs

collapse verschiebt die Einfügemarke an den Anfang oder das Ende des aktuellen Bereichs

move Reduziert den angegebenen Textbereich und verschiebt den leeren Bereich um die angegebene Anzahl von Einheiten

execCommand Führt den Befehl aus das aktuelle Dokument, die aktuelle Auswahl oder den angegebenen Bereich

select Setzt die aktuelle Auswahl auf das aktuelle Objekt

findText sucht nach Text innerhalb des Textes und legt die Start- und Endpunkte des Bereichs fest, der das Objekt umgibt Suchzeichenfolge.

Die Verwendung des TextRange-Objekts umfasst normalerweise drei grundlegende Schritte:

1. Erstellen Sie einen Textbereich

2. Legen Sie die Start- und Endpunkte fest

3. Betreiben Sie den Bereich 

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

Erstellen Sie ein TextRange-Objekt, alle Elemente unterstützen diese Methode. Diese Methode gibt ein TextRange-Objekt zurück.

2.move("Unit"[,count])

Die move()-Methode führt zwei Operationen aus. Zunächst überlappt die Methode das aktuelle Dokument am vorherigen Endpunkt und verwendet diesen als Einfügepunkt. Anschließend verschiebt sie den Einfügepunkt um eine beliebige Anzahl von Zeichen, Wörtern oder Satzeinheiten nach vorne oder hinten. Der erste Parameter der

-Methode ist eine Zeichenfolge, und die von ihr angegebenen Einheiten umfassen Zeichen (Zeichen), Wort (Wort), Satz (Absatz) und Textedit. Der Textedit-Wert verschiebt die Einfügemarke an das Ende des gesamten Textbereichs (keine Parameter erforderlich). Wenn die ersten drei Einheiten angegeben werden, ist der Standardwert 1, wenn der Parameter ignoriert wird. Sie können auch einen ganzzahligen Wert angeben, um die Anzahl der Einheiten anzugeben. Eine positive Zahl steht für die Vorwärtsbewegung und eine negative Zahl für die Rückwärtsbewegung.

Beachten Sie, dass sich die Bereiche nach Ausführung der move()-Methode immer noch überlappen.

3.select()

Die Methode select() wählt den Text innerhalb des aktuellen Textbereichs aus. Der Anzeigecursor muss hier ebenfalls implementiert werden, da der sogenannte „Cursor“ verstanden werden kann als Grenze Überlappende Bereiche 

<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>
Das obige Beispiel zeigt die Verwendung der Methoden moveStart() und moveEne() zur Auswahl eines Bereichs. Die Beschreibungen mehrerer angezeigter Methoden lauten wie folgt:

4.moveStart("Unit"[,count]) und moveEnd("Unit"[,count])

Die Methoden moveStart() und moveEnd() ähneln standardmäßig der Methode move() , der Startpunkt ist das erste Zeichen des Containers.

Wir können die Funktion selectText() oben ändern, um Folgendes zu beweisen: 

function selectText()
{
　 var rng = txtBox.createTextRange();
　 rng.moveStart("character",1);
　 rng.moveEnd("character",-1);
　 rng.select();
}

Verschieben Der Startpunkt wird um ein Zeichen nach vorne und der Endpunkt um ein Zeichen nach hinten verschoben. Nach dem Ausführen können Sie sehen, dass der ausgewählte Bereich der gesamte Textbereich mit Ausnahme des ersten und letzten Zeichens ist.

5.collapse([Boolean])

Sie können die Methode collap() verwenden, um den Textbereich von der aktuellen Größe bis zu einem einzelnen Einfügepunkt zwischen Zeichen zu überlappen. Der optionale Parameter der collap()-Methode ist ein boolescher Wert, der angibt, ob der Bereich am Startpunkt oder am Endpunkt des aktuellen Bereichs überlappt. Der Standardwert ist wahr und fällt am Startpunkt zusammen:

6.findText("searchString"[,searchScope,flags])

Eine der nützlichsten Methoden des TextRange-Objekts ist die findText()-Methode. Ihr Standardverhalten besteht darin, den Textbereich vom Startpunkt bis zum Endpunkt zu durchsuchen und nach einer Zeichenfolgenübereinstimmung ohne Berücksichtigung der Groß-/Kleinschreibung zu suchen. Wenn eine Instanz im Bereich gefunden wird, werden der Startpunkt und der Endpunkt des Bereichs in diesem Text platziert und die Methode gibt „true“ zurück, andernfalls gibt sie „false“ zurück und die Start- und Endpunkte bleiben unverändert. Die Methode durchsucht nur den Anzeigetext, keine Tags oder Attribute.

Der optionale Parameter searchScope ist ein ganzzahliger Wert, der die Anzahl der Zeichen ab dem Startpunkt angibt. Je größer der Wert, desto mehr Text wird in den Suchbereich einbezogen rückwärts vom aktuellen Startpunkt.

可选参数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>

   


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Abhören, Erfassen und Sprudeln von JavaScript-EreignissenNächster Artikel：Abhören, Erfassen und Sprudeln von JavaScript-Ereignissen

In Verbindung stehende Artikel

Mehr sehen