Bonsoir,
je ne devrais sans doute pas résoudre l’exercice à ta place, mais la tentation est trop grande
La sélection du texte se manipule via deux interfaces exposées par le DOM : Selection et Range. En avoir deux paraît excessif ; en réalité, ça couvre les cas rares où la sélection contient plusieurs « fragments » (ranges), ce qu’on peut obtenir en maintenant la touche ctrl et en sélectionnant plusieurs portions de texte à la souris.
Dans la plupart des cas, on n’a besoin de travailler que sur un seul range, et il n’y a pas de convention établie qui dicte comment devrait se comporter un script quand la sélection comporte plusieurs ranges. Personnellement, je considère qu’on peut se permettre de simplement déselectionner les ranges supplémentaires.
Un exemple peut être trouvé sur la page de doc de removeRange. Je l’ai un peu retravaillé ici :
1 2 3 4
| let sel = window.getSelection();
for (let i = 1; i < sel.rangeCount; i++) {
sel.removeRange(sel.getRangeAt(i));
} |
Une fois éliminé le problème des ranges multiples, on accède au premier range comme ceci :
let range = sel.getRangeAt(0);
C’est cet objet range qui contient les méthodes intéressantes. Dans ton cas, surroundContents paraît convenir (je viens de traduire la page ), mais en pratique elle lève des exceptions un peu trop souvent pour être confortable. On préfèrera utiliser la technique alternative présentée dans la doc :
1 2
| newNode.appendChild(range.extractContents());
range.insertNode(newNode); |
newNode doit être un nœud DOM que tu as créé au préalable. Pour augmenter la taille du texte, il est donc utile de créer un élément dont le type d’affichage est inline, typiquement un <span>, et lui ajouter une classe pour pouvoir y appliquer un style CSS.
En n’oubliant pas de « traduire » tout ça en jQuery, ça donne :
1 2 3
| let newNode = $("<span>").addClass("bigger-text");
newNode.append(range.extractContents());
range.insertNode(newNode.get(0)); |
On doit utiliser .get() pour obtenir l’élément « nu », car insertNode ne sait pas travailler avec les objets jQuery.
Et le code CSS qui va avec :
1 2 3
| .bigger-text {
font-size: 120%;
} |
Ou un truc du genre.
Tu auras peut-être envie d’ajouter directement le style depuis ton code JS, sans passer par une classe. C’est moins propre, mais pour l’exercice je suppose que c’est tolérable. Et ça te permettra de gérer plus facilement les différentes valeurs fournies par ton <select>.
Note, la « propreté » du code est une notion subjective ; ce que je veux dire, c’est qu’un code JS n’est pas censé manipuler directement du code CSS (même si on voit souvent cette pratique). C’est un principe parfois appelé
orthogonalité : le JS manipule des classes, le CSS décore des classes, chacun son rôle.
Et sinon, j’ai supposé que tu maîtrisais déjà le principe des évènements, notamment le $('select').on('change', ... ). Mais si ce n’est pas le cas, n’hésite pas à poser d’autres questions
Partager