Mootools en 30 jours : jour 9 - les chaînes de caractère

I. Introduction aux Fonctions chaînes de caractères

Aujourd'hui nous allons regarder à quelques autres fonctions supplémentaires que Mootools nous propose pour manipuler les chaînes de caractères. C'est un aperçu des possibilités de mootools avec les chaînes de caractères, et il n'inclut pas les fonctions les plus compliquées (comme toCamelCase()) ou autre fonction pour les chaînes de caractères utilisant les expressions régulières. Nous prendrons un jour pour approfondir les bases des expressions régulières et leur utilisation avec Mootools un peu plus tard. Si vous ne l'avez pas déja fait, je vous recommande de jeter un oeil aux tutoriels précédents de la série Mootools en 30 jours avant de continuer.

II. Explications

Avant d'entrer dans le vif du sujet, j'aimerais prendre un moment pour vous montrer comment ces fonctions sur les chaînes de caractères sont appelées. Pour mes exemples, j'appellerai ces fonctions sur des variables contenant des chaînes de caractères comme :

var my_text_variable = "Voici du texte";
// resultat variable texte nom de la fonction
var result_of_function = my_text_variable.someStringFunction();

Bien que cela rende les choses plus claires pour les explications, vous devez savoir que ces fonctions sur les chaînes de caractères peuvent également être appelées sans déclarer de variable, comme ceci :

var result_of_function = "Du texte".someStringFunction();

Notez que cela est aussi valable pour les fonctions de Mootools concernant les nombres, par exemple :

//Notez l'utilisation de parenthèses pour les nombres
//contrairement aux chaînes qui utilisent des guillemets
var limited_number = (256).limit(1, 100);

Enfin, j'aimerais vous rappeler encore une fois que le filtrage des entrées ne remplace PAS un filtrage du côté serveur. Tout ce que vous écrivez en jaavscript peut être vu, manipulé et désactivé par la personne qui visite votre page web. Nous parlerons un peu des techniques de filtrage PHP quand nous aborderons la classe Request cde Mootools. Pour le moment, gardez à l'esprit tout ce qui doit être sécurisé doit être fait du côté serveur, et non avec du javascript.



trim()

La fonction trim permet d'enlever les espaces blancs facilement au début et à la fin de n'importe quelle chaîne de caractères.

//Voici le chaine que nous "trimons"
var text_to_trim = " \nString With Whitespace ";
// trimmed_text donne "String With Whitespace"
var trimmed_text = text_to_trim.trim();

Si vous ne connaissiez pas encore ce \n , il s'agit d'un raccourci pour une nouvelle ligne. Mettez le dans une chaîne de caractère quand vous voulez la séparer en plusieurs lignes. Les nouvelles lignes sont prises comme des espaces blancs par trim, donc cela les retire aussi. Il y a une chose que Trim ne fait pas, c'est enlever les espaces blancs à l'intérieur d'une chaîne. L'exemple ci-dessous vous montre ce qu'il se passe sur une chaîne de caractères avec des nouvelles lignes qui sont enlevées par Trim :

var trimDemo = function(){
//Chargement du texte qu'on va "trimer"
var text_to_trim = ' \ntoo much whitespace\n ';
 
//On passe Trim dessus
var trimmed_text = text_to_trim.trim();
 
//Renvoie le résultat
alert('Avant Trim : \n' +
'|-' + text_to_trim + '-|\n\n' +
'Après Trim : \n' +
'|-' + trimmed_text + '-|');
}



clean()

Vous n'êtes pas obligés de vouloir retirer tous les espaces blancs d'une chaîne de caractères. Mais heureusement pour ceux qui sont intéressés par ça, Mootools fournit généreusement de quoi le faire avec clean().

//La chaîne qui va être trimée
var text_to_clean = " \nString \nWith Lots \n \n More \nWhitespace \n ";
// cleaned_text devient "String With Lots More Whitespace"
var cleaned_text = text_to_trim.clean();

clean() est comme trim avec une différence notable. Au lieu de restreindre la fonction de suppression de espaces blancs au début et à la fin d'une chaîne de caractère, elle enlève TOUS les espaces blancs des chaînes de caractères que vous lui passez. Cela signifie qu'elle enlève tous les espaces qui apparaissent au moins 2 fois consécutivement et les tabulations dans la chaîne de caractères. Comparez le résultat à trim pour bien voir ce que je veux dire.

var cleanDemo = function(){
//charge le texte qui va être nettoyé
var text_to_clean = ' too\n much\n whitespace ';
 
//Nettoyage...
var cleaned_text = text_to_clean.clean();
 
//Renvoie le résultat
alert('Avant Clean : \n' +
'|-' + text_to_clean + '-|\n\n' +
'Après Clean : \n' +
'|-' + cleaned_text + '-|');
}



contains()

Comme trim() et clean(), contains() fait une seule chose de façon très simple. Il scanne une chaîne de caractères pour voir si elle contient une autre chaîne que vous avez défini, renvoie true si la chaîne de recherche est trouvée, ou false si elle ne l'est pas.

//Notre chaine à chercher
var string_to_match = "Does this contain thing work?";
 
//Recherche 'contain', did_string_match est true (vrai)
var did_string_match = string_to_match.contains('contain');
 
//Recherche 'propane', did_string_match est faux (false)
did_string_match = string_to_match.contains('propane');

Cette fonction peut être pratique dans beaucoup de situations, et quand vous l'utilisez en combinaison avec d'autres outils comme la fonction Array.each() que nous avons vu au jour 3 vous pouvez accomplir des tâches complexes avec relativement peu de code. Par exemple, si nous prenons une liste de mots dans un tableau et que nous bouclons dessus, nous pouvons rechercher plusieurs phrases dans le même bloc de texte avec peu de code :

	string_to_match = "string containing whatever words you want to try to match";
word_array = ['words', 'to', 'match'];
//Passe chaque mot du tableau comme une variable
word_array.each(function(word_to_match){
//Regarde le mot courant
if (string_to_match.contains(word_to_match)){
alert('found ' + word_to_match);
};
});

Mettez un champ de texte avec un peu d'imagination; et vous avez votre propre détecteur de mots ;-)

var containsDemo = function(){
//Notre liste de mots bannis dans un tableau
var banned_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat'];
 
//Recupère le contenu de la zone de texte
var textarea_input = $('textarea_1').get('value');
 
//Boucle sur chacun des mots bannis
banned_words.each(function(banned_word){
//Recherche le mot banni courant
//dans le contenu de la zone de texte
if (textarea_input.contains(banned_word)){
//Dis à l'utilisateur de ne pas utiliser ce mot
alert(banned_word + ' est interdit');
};
});
}




substitute()

substitute est un outil vraiment puissant. Nous allons juste en voir les bases pour aujourd'hui, car une grande partie de la puissance de substitute réside dans l'utilisation des expressions régulières, que nous verrons plus en détails un autre jour. Il reste que l'utilisation basique vous permet de faire pas mal de choses.

//Voici le texte que substitute utilisera 
//comme template. Notez que tout ce qui est
//à remplacer est entouré par des {accolades}
var text_for_substitute = "One is {one}, Two {two}, Three is {three}.";
 
//Voici l'objet qui contient les règles
//de remplacement. Les mots sans quotes sur la gauche
//sont les termes à rechercher, et les phrases avec quotes
//sur la droite sont les phrases qui vont les remplacer
var substitution_object = {
one : 'the first variable',
two : 'always comes second',
three : 'getting sick of bronze..'
};
 
//appelez substitute avec l'objet de remplacement
//comme argument sur text_for_substitute,
//placez les résultat dans la variable new_string
var new_string = text_for_substitute.substitute(substitution_object);
 
//new_string donne maintenant
//"One is the first variable, Two always comes second,
//Three is getting sick of bronze..."

Vous n'êtes pas obligé de créer le substitution_object pour utiliser substitute si vous n'en avez pas besoin, l'exemple suivant fonctionnera aussi bien :

//Construisez la chaine de remplacement
var text_for_substitute = "{substitute_key} and the original text";
//Incluez juste l'objet de remplacement en paramètre de substitute
var result_text = text_for_substitute.substitute({substitute_key : 'substitute_value'});
//result_text renvoie "substitute_value and the original text"

Vous pouvez même aller plus loin avec cette fonction, et placez des appels pour récupérer les valeurs du DOM comme valeurs de remplacement, et cela fonctionnera tout aussi bien.

var substituteDemo = function(){
//Prend le texte original de la zone de texte
var original_text = $('substitute_span').get('html');
 
//Remplace les valeurs due la zone de texte
//avec les valeurs des champs de texte
var new_text = original_text.substitute({
first : $('first_value').get('value'),
second : $('second_value').get('value'),
third : $('third_value').get('value'),
});
 
//Remplace le contenu du span par le nouveau texte
$('substitute_span').set('html', new_text);
 
 
//Désactive le bouton substitue et
//et active le bouton reset
$('simple_substitute').set('disabled', true);
$('simple_sub_reset').set('disabled', false);
}
 
var substituteReset = function(){
//Créé une variable pour stocker le texte original
var original_text = "|- {first} -- {second} -- {third} -|";
 
//Remplace le contenu du span par le texte original
$('substitute_span').set('html', original_text);
 
//Désactive le bouton reset et active
//le bouton substitute
$('simple_sub_reset').set('disabled', true);
$('simple_substitute').set('disabled', false);
}

|- {first} — {second} — {third} -|

first_value

second_value

third_value




Une petit note avant d'arrêter pour aujourd'hui : si vous appelez substitute sur une chaîne et ne fournissez pas une paire key : value pour chaque {clé à remplacer} dans le texte, cela supprimera simplement ce qui se trouve entre les accolades. Donc attention à ne pas utiliser cela sur une chaîne contenant des accolades que vous souhaitez garder. Par exemple, cela :

("{one} some stuff {two} some more stuff").substitute({one : 'substitution text'});

retournera "substitution text some stuff some more stuff".

III. Conclusion du tutorial