Zusammenfassung der Verwendung des textRange-Objekts in JavaScript_Javascript-Kenntnissen

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 Attribute und Methoden von TextRange aufgeführt:

Attribute

boundingHeight ruft die Höhe des an das TextRange-Objekt gebundenen Rechtecks ​​ab
BoundingLeft ermittelt den Abstand zwischen der linken Kante des an das TextRange-Objekt gebundenen Rechtecks ​​und der linken Seite des enthaltenden TextRange-Objekts
offsetLeft Ruft die berechnete linke Position des Objekts relativ zum Layout oder der übergeordneten Koordinate ab, die durch die Eigenschaft offsetParent
angegeben wird offsetTop ruft die berechnete obere Position des Objekts relativ zum Layout oder zur übergeordneten Koordinate ab, die durch die Eigenschaft offsetParent
angegeben wird htmlText ruft die Breite des an das TextRange-Objekt
gebundenen Rechtecks ​​ab text legt den im Bereich
enthaltenen Text fest oder ruft ihn ab Methode

moveStart ändert die Startposition des Bereichs
moveEnd ändert die Endposition des Bereichs
Reduzieren verschiebt den Einfügepunkt an den Anfang oder das Ende des aktuellen Bereichs
move Reduziert den angegebenen Textbereich und verschiebt den leeren Bereich um die angegebene Anzahl von Zellen
execCommand führt einen Befehl für das aktuelle Dokument, die aktuelle Auswahl oder den angegebenen Bereich
aus select setzt den aktuellen Auswahlbereich auf das aktuelle Objekt
findText sucht nach Text innerhalb von Text und legt die Start- und Endpunkte des Bereichs so fest, dass sie die Suchzeichenfolge umgeben.
Die Verwendung von TextRange-Objekten umfasst normalerweise drei grundlegende Schritte:

　1. Erstellen Sie einen Textbereich

　2. Legen Sie den Startpunkt und den Endpunkt fest

　3. Bedienen Sie den Bereich

Code kopieren Der Code lautet wie folgt:

Bewegen Sie den Cursor an die Position




1.createTextRange()


Erstellen Sie ein TextRange-Objekt wie BODY, TEXT, TextArea und BUTTON. Diese Methode gibt ein TextRange-Objekt zurück.

2.move("Einheit"[,Anzahl])

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 angegebenen Einheiten sind Zeichen, Wort, Satz 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 select()-Methode wählt Text innerhalb des aktuellen Textbereichs aus. Der Anzeigecursor muss hier ebenfalls implementiert werden, da der sogenannte „Cursor“ als der Bereich verstanden werden kann, in dem die Grenzen zusammenfallen

Code kopieren

Der Code lautet wie folgt:

Chrysanthemum Terrace (The Golden Armor Theme Song in the City) <br> Sänger: Jay Chou Album: Still Fantasy <br> Deine Tränen sind schwach und verletzend <br> Die blasse Mondsichel fesselt die Vergangenheit <br> Die Nacht ist so lang, dass es zu Frost kondensiert <br> Wer ist die kalte Verzweiflung auf dem Dachboden <br> Der Regen fließt sanft, das zinnoberrote Fenster <br> Mein Leben ist auf Papier, vom Wind verweht <br> Träume verwandeln sich in der Ferne in einen Wolkenfetzen <br> Dein Aussehen wird vom Wind verweht <br> Die Chrysantheme tut so weh, dass Ihr Lächeln gelb geworden ist <br> Die Blumen fallen und mein Herz ist gebrochen, meine Gedanken fließen ruhig <br> Der Nordwind ist immer noch im Chaos und die Nacht ist noch jung, dein Schatten schneidet weiter <br> Lass mich in Ruhe, damit der See frostig wird <br>




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 der Methode move(). Standardmäßig ist der Startpunkt das erste Zeichen des Containers und der Endpunkt das letzte Zeichen

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

Code kopieren

Der Code lautet wie folgt:

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

}

Déplacez le point de départ d'un caractère vers l'avant et le point de fin vers l'arrière d'un caractère. Après l'exécution, vous pouvez voir que la plage sélectionnée est la plage de texte entière à l'exception du premier caractère et du dernier caractère.

5.collapse([Booléen])

Vous pouvez utiliser la méthode Collaps() pour superposer la plage de texte de la taille actuelle à un seul point d'insertion entre les caractères. Le paramètre facultatif de la méthode Collaps() est une valeur booléenne, qui indique si la plage se chevauche au début ou à la fin de la plage actuelle. La valeur par défaut est vraie, coïncide avec le point de départ :

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

L'une des méthodes les plus utiles de l'objet TextRange est la méthode findText(), dont le comportement par défaut est de parcourir la plage de texte du point de départ au point final, en recherchant une correspondance de chaîne insensible à la casse. Si une instance est trouvée dans la plage, les points de début et de fin de la plage sont placés dans ce texte, et la méthode renvoie true sinon, elle renvoie false et les points de début et de fin restent inchangés ; La méthode recherche uniquement le texte affiché, pas les balises ou les attributs.

Le paramètre facultatif searchScope est une valeur entière qui indique le nombre de caractères à partir du point de départ. Plus la valeur est grande, plus le texte est inclus dans la plage de recherche ; une valeur négative forcera l'opération de recherche à effectuer une recherche en arrière à partir du point de départ. point de départ actuel.

Le paramètre facultatif flag est utilisé pour définir si la recherche est sensible à la casse ou si elle correspond uniquement au mot entier. Les paramètres sont des valeurs entières qui utilisent des mathématiques au niveau du bit pour calculer une valeur unique pouvant contenir un ou plusieurs paramètres. La valeur pour faire correspondre le mot entier est 2 ; la valeur pour faire correspondre les majuscules et les minuscules est 4 ; si vous ne souhaitez faire correspondre qu'un seul élément, il suffit de fournir uniquement la valeur souhaitée, mais pour les deux comportements, utilisez l'opérateur XOR au niveau du bit ; (opérateur ^) donne la valeur 6.

Les applications les plus courantes de la méthode findText() incluent les opérations de recherche et de remplacement dans une plage et le formatage d'une instance d'une chaîne. Étant donné que la recherche commence généralement au point de départ actuel de la plage, le point de départ doit être déplacé. à la plage lors d'une nouvelle requête. Après être passé à la fin du texte correspondant (comme dans l'exemple 3), findText() peut continuer à parcourir la plage de texte restante pour trouver une autre correspondance. Vous pouvez utiliser la méthodeeffondrement(false) pour forcer le point de départ à se déplacer vers le point final de la première plage correspondante. Ainsi, la fonction findText() de l'exemple 3 peut également être modifiée comme :

Copier le code Le code est le suivant :

var rng = txtBox.createTextRange();
fonction findText(str)
{
​ if(str=="")
​ revenir;
​ if(rng.findText(str))
　　{
​ rng.select();
　rng.collapse(false);
　　 }
//Si la dernière plage ne peut pas être trouvée après la recherche, il vous demandera que la recherche est terminée et restaurera la plage d'origine de rng (sinon, une nouvelle recherche ne pourra pas être effectuée)
​ d'autre
　　{　　
​​ alert("Recherche terminée");
​ rng = txtBox.createTextRange();
　　 }
}　

6.parentElement()

La méthode parentElement() renvoie une référence au conteneur contenant la plage de texte

Récupère l'objet DOM du texte sélectionné par le curseur

Copier le code Le code est le suivant :

<script> fonction getParElem() <br> { <br> var rng = document.selection.createRange(); <br> var conteneur = rng.parentElement(); <br> //alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type")); <br> alert(conteneur.tagName); <br> } <br> </script> C'est un texte qui n'appartient qu'à Body

Ceci est le texte contenu dans le div

Voici le texte contenu dans p

Ceci est le texte contenu dans le div->strong