<< Retour au sommaire

 

 

Les méthodes de traitements de chaînes de caractères

 

 

 

Le sommaire :

  1. Introduction.
  2. La méthode « length.
  3. La méthode « charAt ».
  4. La méthode « indexOf ».
  5. La méthode « substring ».
  6. Les méthodes « toLowerCase » & « toUpperCase ».

 

 

Introduction

 

Les méthodes que je vais vous présenter ici appartiennent à l’objet « string ».

 

Je rappelle qu’une chaîne de caractères est un texte placé entre guillemets.

 

En clair, les méthodes que nous allons étudier s’applique à un texte encadré par des guillemets ou à des variables contenant du texte.

 

 

La méthode length

 

Cette méthode retourne un entier qui correspond à la longueur d’une chaîne de caractères.

 

La syntaxe :

 

VariableEntier = VariableTexte.length ;

 

Voici un exemple qui demande à l’utilisateur son prénom et ensuite, qui affiche le nombre de caractères du prénom :

 

Fonction length, essayer l’exemple >>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

<title>Bonjour</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<script type="text/javascript">

var Prénom = prompt ("Quel est votre prénom ?","");

var Longueur = Prénom.length;

window.alert("La longueur de votre prénom est de "+Longueur+" caractères");

</script>

<p>

Fin de l'exemple</p>

</body>

</html>

 

 


La méthode « charAt »

 

Cette méthode permet d’obtenir le caractère d’un texte par rapport à sa position.

 

Par exemple, le quatrième caractère de « Toto » est un « O ».

 

La syntaxe :

 

Var résultat = chaîne.charAt(position);

 

La description :

 

« Résultat » est le caractère retourné par la méthode.

« Chaîne » est la chaîne de caractères à traiter, soit un texte placé entre guillemets, soit une variable de type « texte ».

 

« Position » est un entier qui indique la position du caractère souhaité dans la chaîne de caractères.

Attention, la position du premier caractère est 0.

Par conséquent, pour obtenir le deuxième « O » de « toto » :

var résultat = "toto".charAt(3);

 

Voici un exemple.

Dans cette page, on demande le prénom de l’utilisateur, et si la longueur du prénom est supérieur ou égale à 3, on affiche le troisième caractère.

Sinon, on affiche un message d’erreur…

 

Fonction charAt, essayer l’exemple >>

 

Voici le code :

 

<html>

<head>

<title>Bonjour !</title>

</head>

<body>

<script type="text/javascript">

var prénom = prompt("Quel est votre prénom ?","");

var longueur = prénom.length;

if (longueur >= 3) {

 var lettre3 = prénom.charAt(2);

 document.write("<p>");

 document.write ("la troisième lettre de votre prénom est "+lettre3);

 document.write("</p>"); }

else {

 window.alert ("Désolé, la longueur de votre prénom est insuffisante !"); }

</script>

<p><a href="charAt.html">Recommencer</a></p>

</body>

</html>

 

  


La méthode « indexOf »

 

Cette méthode permet de rechercher une sous chaîne à l’intérieur » d’une chaîne et à partir d’une position.

Si la sous chaîne est trouvée, la méthode « indexOf » retourne la position du premier caractère de la sous chaîne à l’intérieure de la chaîne, sachant que le premier caractère correspond à la position 0.

 

La syntaxe :

 

var résultat = chaîne.indexOf(Sous_Chaîne,Position);

 

La description :

 

« résultat » est une variable de type entier qui reçoit la position du premier caractère de la sous chaîne dans la chaîne. Si la sous chaîne n’est pas trouvée, le résultat est moins 1.

 

« chaîne », Il s’agit du texte dans lequel la recherche va avoir lieue, c’est une chaîne de caractères encadrée par des guillemets ou une variable.

 

« Sous_Chaîne » est quant à elle le texte à rechercher dans le texte, il s’agit d’une chaîne de caractères encadrée par des guillemets ou une variable.

 

Voici un exemple.

On demande à l’utilisateur de saisir son prénom et son nom.

Ensuite, on recherche dans cette saisie si le prénom « Philippe » est présent !

En fonction du résultat, on affiche un message de succès ou d’échec…

Attention, les minuscules et majuscules sont prises en compte…

 

Fonction indexOf, essayer l’exemple >>

 

Voici le code :

 

<html><head>

<title>Qui êtes-vous</title>

</head>

<body>

<script type="text/javascript">

var NomComplet = prompt("Saisissez votre nom et prénom :","");

var oui = NomComplet.indexOf("Philippe",0);

if (oui>=0) {

 window.alert("Bravo, nous avons le même prénom"); }

else {

 window.alert("échec, nous n'avons pas le même prénom"); }

</script>

<p>coucou !</p>

<p>

<a href="indexOf.html">Recommencer</a></p>

</body>

</html>

 

 


La méthode « substring »

 

Cette méthode permet d’extraire une sous chaîne à l’intérieur d’un texte.

 

La syntaxe :

 

var résultat = texte.substring (Départ,Longueur);

 

La description :

 

« Résultat » est la sous chaîne extraite dans « texte ».

 

« Texte » est une chaîne de caractères placée entre guillemets ou une variable contenant du texte.

 

« Départ » est un entier, c’est la position du premier caractère d’où doit débuter l’extraction. Le premier caractère étant 0.

 

« Longueur » est un entier qui précise la longueur en caractères de la sous chaîne à extraire depuis la position de départ.

 

Par exemple, pour extraire 4 caractères à partir du troisième caractère :

var résultat = texte.substring (2,4);

 

Voici un exemple.

Ici, on demande à l’utilisateur de saisir du texte.

Puis, on extrait les 5 premiers caractères du texte et on les affiche dans la page…

 

Fonction substring, essayer l’exemple >>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

<title>Extraire une sous chaîne</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<body>

<p>

<script type="text/javascript">

var Chaine = prompt("Saisissez une chaîne de caractères :","");

var SousChaine = Chaine.substring(0,5);

document.write("les 5 premiers caractères de la chaîne saisie sont : "+SousChaine);

</script>

</p>

<p>

<a href="substring.html">Recommencer</a>

</p>

 

</body>

</html>

 


Les méthodes « toLowerCase » & « toUpperCase »

 

Ces deux méthodes ont la même syntaxe mais jouent un rôle opposé !

 

En effet, « toLowerCase » convertit une chaîne de caractères en minuscule, tandis que « toUpperCase » la convertit en majuscule.

 

La syntaxe :

Var résultat = chaîne.toLowerCase() ;

Et

Var résultat = chaîne.toUpperCase() ;

 

Voici un exemple.

Ici, on demande le nom de famille à l’utilisateur, puis sa couleur préférée.

Dans le soucis d’une erreur de casse de la par de l’utilisateur, on convertit automatiquement le nom en majuscule et la couleur en minuscule, et ensuite, on écrit le résultat dans la page…

 

Fonctions toLowerCase et toUperCase, essayer l’exemple >>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

<title>présentation</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<body>

<p>

<script type="text/javascript">

var nom = prompt("Quel est votre nom de famille ? ","");

var couleur = prompt("Quelle est votre couleur préférée ? ","");

nom = nom.toUpperCase();

couleur = couleur.toLowerCase();

document.write("Vous vous appelez "+nom);

document.write(" et votre couleur préférée est le "+couleur);

</script>

</p>

<p>

<a href="toLowerCase&toUpperCase.html">Recommencer</a>

</p>

</body>

</html>

 

Philippe BOULANGER<< Re