P5js et JavaScript nous donnent un grand nombre d'outils permettant de travailler sur des chaînes de caractères.
Il est possible de connaitre le nombre de caractères présents dans une chaîne à l'aide de "length".
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
script.js
var msg;
function setup(){
can=createCanvas(400,200);
background(0);
msg="Bonjour le monde!";
nb=msg.length;
textAlign(CENTER);
fill(255);
text("La chaîne '"+msg+"' est constituée de "+nb+" caractères",200,100)
}
function draw(){
}
Comme vous pouvez le constater, le caractère "espace" est comptabilisé.
La méthode "charAt" retourne le caractère situé à l'index qui a été passé en paramètre :
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var msg;
var c;
function setup(){
can=createCanvas(400,200);
background(0);
msg="Bonjour le monde!";
c=msg.charAt(3)
textAlign(CENTER);
fill(255);
text("Le 4e caractère de la chaîne '"+msg+"' est un "+c,200,100)
}
function draw(){
}
Attention : le premier caractère a pour indice 0 (comme dans un tableau), donc, l'indice 3 correspond bien au 4e caractère.
Pour comparer 2 chaînes de caractères, il est possible d'utiliser le double égal "==".
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var msg1;
var msg2;
var msg;
function setup(){
can=createCanvas(600,200);
background(0);
msg1="Bonjour le monde!";
msg2="Bonjour le monde";
msg="Les chaines de caractères '"+msg1+"' et '"+msg2+"' sont";
textAlign(CENTER);
fill(255);
if (msg1==msg2){
text(msg+ " identiques",300,100);
}
else{
text(msg+ " différentes",300,100);
}
}
function draw(){
}
La méthode "toUpperCase" permet de convertir tous les caractères d'une chaîne en majuscules. La méthode "toLowerCase" permet de convertir tous les caractères d'une chaîne en minuscules.
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var msg;
function setup(){
can=createCanvas(400,200);
background(0);
msg="Bonjour le monde!";
textAlign(CENTER);
fill(255);
text("Tous les caractères sont en minuscule : "+msg.toLowerCase(),200,50);
text("Tous les caractères sont en majuscule : "+msg.toUpperCase(),200,150);
}
function draw(){
}
La méthode "substring" permet de retourner une partie d'une chaîne de caractères. Elle peut prendre un ou deux paramètres :
maChaine.substring(index_deb);
ou
maChaine.substring(index_deb, index_fin);
Si "index_fin" n'est pas précisé, la méthode retourne une chaîne composée des caractères situés entre "index_deb" et la fin de la chaîne. Si "index_fin" est renseigné, la méthode retourne une chaîne composée des caractères situés entre "index_deb" et "index_fin".
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var msg;
function setup(){
can=createCanvas(600,200);
background(0);
msg="Bonjour le monde!";
textAlign(CENTER);
fill(255);
text("Caractères à partir de l'indice 10 jusqu'à la fin de la chaîne : "+msg.substring(10),300,50);
text("Caractères de l'indice 0 à l'indice 6 : "+msg.substring(0,7),300,150);
}
function draw(){
}
Attention : comme vous pouvez le constater le caractère situé à l'indice "index_fin" est exclu.
La méthode "indexOf" permet de recherche un motif de caractères (une suite de caractères) dans une chaîne. Si ce motif est trouvé, la méthode "indexOf" renvoie l'indice de position du premier caractère du motif.
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var msg;
var motif;
var i;
function setup(){
can=createCanvas(400,200);
background(0);
msg="Bonjour le monde!";
motif="jour";
i=msg.indexOf(motif);
textAlign(CENTER);
fill(255);
text("le début du motif '"+motif+"' se situe à l'index "+i,200,100);
}
function draw(){
}
Écrivez un programme qui permettra de donner l'indice de position du motif "on".
Comme vous l'avez peut-être remarqué, le motif "on" est présent à 2 endroits (dans "bonjour" et dans "monde"). La méthode "indexOf" renvoie l'indice de position du premier motif rencontré, le second est ignoré.
Écrivez un programme qui vous permettra de répondre à la question suivante : que renvoie la méthode "indexOf" dans le cas où le motif recherché n'est pas présent dans la chaîne ?
Il est possible de séparer les éléments d'une chaîne de caractères en utilisant un "caractère séparateur" :
La méthode "split" prend 2 arguments : la chaîne de caractères à séparer et le "caractère séparateur"
split("tata;titi;toto",";")
Dans l'exemple ci-dessus, la méthode "split" retourne le tableau suivant : ["tata","titi","toto"]
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var str;
var tab;
function setup(){
can=createCanvas(400,200);
background(0);
str="toto;titi;tata";
tab=split(str,";");
textAlign(CENTER);
fill(255);
text(tab[1],200,100);
}
function draw(){
}
Il est tout à fait possible d'utiliser le caractère "espace" comme "caractère séparateur"
Écrivez un programme permettant de séparer les différents mots d'une phrase. Par exemple, en partant de la phrase "Bonjour le monde!", votre programme devra permettre d'afficher ceci :
le mot n°0 est 'Bonjour'
le mot n°1 est 'le'
le mot n°2 est 'monde!'
Attention votre programme devra fonctionner avec n'importe quelle phrase.
Écrivez un programme permettant d'inverser les mots d'une phrase. Par exemple, pour la phrase "Bonjour le monde!", on obtiendra "monde! le Bonjour"
Pour vous aider : il faudra (sans doute) utiliser la concaténation.
La méthode "splitTokens" est une méthode "cousine" de la méthode "split" qui permet de considérer plusieurs "caractères séparateurs" en même temps.
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var str;
var tab;
function setup(){
can=createCanvas(400,200);
background(0);
str="toto titi,tata;tutu! hello";
tab=splitTokens(str," ;,!");
textAlign(CENTER);
fill(255);
for (i=0;i<tab.length;i=i+1){
text(tab[i],200,20+20*i);
}
}
function draw(){
}
Les "caractères séparateurs" sont placés les uns à la suite des autres (y compris le caractère "espace").
La méthode "join" a l'effet inverse de la méthode "split" :
À partir d'un tableau contenant des chaînes de caractères, la méthode "join" crée une chaîne unique. Chaque élément est séparé par un "caractère de séparation"
modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)
var str;
var tab;
function setup(){
can=createCanvas(400,200);
background(0);
tab=["toto","titi","tata"];
str=join(tab,";");
textAlign(CENTER);
fill(255);
text(str,200,100);
}
function draw(){
}
Écrivez un programme permettant d'obtenir la chaîne "Bonjour le monde!" à partir de la chaîne "Bonjour*le*monde!" :
Avant : Bonjour*le*monde!
Après : Bonjour le monde!