11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Au sein d'un texte je veux pouvoir selectionner un/ des mots ou des lettres d'un mot,
et leur ajouter un SPAN autour, pour montrer a l'utilisateur qu'il a bien selectionné le bout de texte.

un peu comme dans un wysiwyg si on clique sur licone BOLD par exemple.

Dans mon cas j'ai un texte dans une DIV.

J'ai essayer en remplacant "montexte" par "SPAN montexte /SPAN" mais alors du coup ca remplace tous les bouts de textes similaires, et pas juste la selection faite avec la souris.

Avez vous une idee de comment ca pourrait marcher ?
Hello,

Apparemment, on peut récupérer un texte sélectionné, avec des méthodes différentes selon les navigateurs. Un article trouvé vite fait: http://www.codetoad.com/javascript_get_selected_text.asp

Le problème c'est que ces méthodes récupèrent un texte. Tu ne peux pas récupérer toutes les instances de ce texte dans ton conteneur, ou uniquement la première, ça serait source d'erreurs. Donc il faut aller plus loin...

Là où ça se complique, c'est qu'il n'y a pas de standard en la matière. IE a une manière de faire, Netscape en avait une autre (reprise dans Firefox), à voir pour Safari/Chrome, et Opera.

Pour Firefox:
https://developer.mozilla.org/en/DOM/Selection

La bonne nouvelle, c'est que HTML5 reprend la version de Netscape pour la standardiser. Et l'API Selection de HTML5 sera à priori supportée par IE9, comme évoqué ici:
http://blogs.msdn.com/b/ie/archive/2010/05/11/dom-range.aspx

Voilà, je n'en sais pas plus, si ce n'est qu'avec les navigateurs actuels il faut sans doute faire du code différent pour les uns et les autres, ce que les éditeurs «WYSIWYG» en JavaScript tels que CKEditor et WYMeditor s'efforcent de faire plutôt bien depuis longtemps. Tu aurais peut-être intérêt à utiliser l'un de ces outils...
Merci !
Ta reponse confirme bien ce que je pensais, et m'oriente donc plutot vers la segmentation texte en differents mots avec pour chacuns un span#id different. Ensuite quand on selectionne les spans on leur ajoute une classe 'selected' et voila. On a simplifié le probleme avec le client a gardant la possibilite de juste pouvoir selectionner un ou des mots (et non des lettres)

Bonne journée !