Résumé de l'utilisation de l'objet textRange dans les compétences JavaScript

L'objet TextRange est une fonctionnalité avancée du HTML dynamique (DHTML). Il peut être utilisé pour réaliser de nombreuses tâches liées au texte, telles que la recherche et la sélection de texte. Les plages de texte vous permettent de sélectionner de manière sélective des caractères, des mots et des phrases dans un document. L'objet TextRange est un objet abstrait qui établit les positions de début et de fin sur le flux de texte que le document HTML affichera.

Voici les attributs et méthodes couramment utilisés de TextRange :

Attributs

boundingHeight obtient la hauteur du rectangle lié à l'objet TextRange
boundingLeft obtient la distance entre le bord gauche du rectangle lié à l'objet TextRange et le côté gauche de l'objet TextRange contenant
offsetLeft Obtient la position gauche calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent
offsetTop obtient la position supérieure calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent
htmlText obtient la largeur du rectangle lié à l'objet TextRange
text définit ou obtient le texte contenu dans la plage
Méthode

moveStart change la position de départ de la plage
moveEnd change la position finale de la plage
Réduire déplace le point d'insertion au début ou à la fin de la plage actuelle
move Réduit la plage de texte donnée et déplace la plage vide du nombre de cellules donné
execCommand exécute une commande sur le document actuel, la sélection actuelle ou une plage donnée
select définit la zone de sélection actuelle sur l'objet actuel
findText recherche du texte dans le texte et définit les points de début et de fin de la plage pour entourer la chaîne de recherche.
L'utilisation des objets TextRange implique généralement trois étapes de base :

　1. Créer une plage de texte

　2. Définissez le point de départ et le point final

　3. Faire fonctionner la cuisinière

Copier le code Le code est le suivant :

fonction moveCursor()
{
var temp = this.txtNum.value
　　if(isNaN(temp))
　　 {
alert("Veuillez entrer un numéro");
revenez;
　　 }
var rng = this.txtTest.createTextRange();
　　rng.move("personnage",temp
rng.select();
}

Déplacez le curseur vers la position

1.createTextRange()

Créez un objet TextRange. Les éléments tels que BODY, TEXT, TextArea et BUTTON prennent tous en charge cette méthode. Cette méthode renvoie un objet TextRange.

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

La méthode move() effectue deux opérations. Premièrement, la méthode chevauche le document actuel au point final précédent et l'utilise comme point d'insertion ; ensuite, elle déplace le point d'insertion vers l'avant ou vers l'arrière d'un nombre quelconque de caractères, de mots ou d'unités de phrase.

Le premier paramètre de la méthode est une chaîne et les unités spécifiées sont le caractère, le mot, la phrase et l'édition de texte. La valeur textedit déplace le point d'insertion à la fin de toute la plage de texte (aucun paramètre requis). Si les trois premières unités sont spécifiées, la valeur par défaut est 1 lorsque le paramètre est ignoré. Vous pouvez également spécifier une valeur entière pour indiquer le nombre d'unités. Un nombre positif représente un mouvement vers l'avant et un nombre négatif représente un mouvement vers l'arrière. Notez que les plages se chevauchent toujours après l'exécution de la méthode move().

　3.select()

La méthode select() sélectionne le texte dans la plage de texte actuelle. Le curseur d'affichage ici doit également être implémenté en l'utilisant, car le soi-disant "curseur" peut être compris comme la plage où les limites coïncident

Copier le code

Le code est le suivant :

var rng = txtBox.createTextRange();
fonction findText(str)
{
if(str=="")
revenez;
//Définissez une variable comme décalage de la fonction moveStart(), c'est-à-dire le point de départ pour sauter le texte sélectionné
var num = 0;
　 if(document.selection)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　num = document.selection.createRange().text.length
//Chaque fois que la fonction est appelée, le point final est la fin, et le point de départ est le nouveau point de départ après avoir ignoré le texte sélectionné
rng.moveStart("character",num);
rng.moveEnd("character",txtBox.value.length);
//Sélectionnez le texte après l'avoir recherché
if(rng.findText(str))
rng.select();
//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)
if(rng.text!=str)
　　　　
alert("Recherche terminée");
rng = txtBox.createTextRange();
}
}　

L'exemple ci-dessus démontre l'utilisation des méthodes moveStart() et moveEne() pour sélectionner une plage. Les descriptions de plusieurs méthodes qui apparaissent sont les suivantes :

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

Les méthodes moveStart() et moveEnd() sont similaires à la méthode move() Par défaut, le point de départ est le premier caractère du conteneur et le point final est le dernier caractère

Nous pouvons modifier la fonction selectText() ci-dessus pour prouver :

Copier le code

Le code est le suivant :

fonction selectText() { var rng = txtBox.createTextRange(); rng.moveStart("caractère",1); rng.moveEnd("caractère",-1); rng.select();

　　將開始點向前移動一個字符、結束點向後移動一個字符，運行後可以看到選擇的範圍是除第1個字符和最後1個字符的整個文本範圍。

　　5.collapse([Boolean])

　　可以用collapse()方法把文字範圍從目前尺寸重疊成字元間的單一插入點。 collapse()方法的可選參數是Boolean值,它指出範圍是在目前範圍的開始點重合，還是結束點重合。預設值為true，在起始點重合:

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

　　TextRange物件最有用的方法之一是findText()方法，其預設行為是從開始點到結束點瀏覽文字範圍，搜尋一個不區分大小寫的字串匹配。如果在範圍中發現一個實例，範圍的開始點和結束點就放到這個文字中，方法回傳true；否則回傳false,開始點和結束點都不動。方法僅搜尋顯示文本，而任何標記或屬性都不會被搜尋。

　　可選參數searchScope是一個整數值，它指示從開始點的字元數，值越大，包含在搜尋範圍的文字越多；負值將迫使搜尋操作從目前開始點向後搜尋。

　　可選參數flag用來設定搜尋是否區分大小寫，或是否僅符合整個單字。參數是整數值，它用位元組合的數學方法計算單一值，這些值可以容納一個或多個設定。匹配整個單字的值為2；匹配大小寫的值為4；如果只想匹配一項，則只提供希望的值就夠了，但對於兩種行為，要用位元操作XOR操作符(^操作符)使值為6。

　　findText()方法最常用的應用包括範圍中的查找和替換操作，以及格式化一個字串的實例，因為搜尋通常以範圍的當前開始點開始，所以再次查詢要將開始點移到範圍中符合文字的結尾(如範例3)，移動後才能讓findText()繼續瀏覽剩下的文字範圍，來找出另一個符合。可以使用 collapse(false)方法迫使開始點移動第一個符合的範圍的結束點。所以範例3的findText()函數也可以修改為:

複製程式碼程式碼如下:

　　6.parentElement()

　　parentElement()方法傳回包含文字範圍容器的參考

　　取得遊標選取文字的DOM物件

複製程式碼程式碼如下:

這是包含在div裡的文字

這是包含在p裡面的文字

這是包含在div->strong的文字