[javascript] Souligner une partie d'un texte mise en surbrillance

Souligner une partie d'un texte mise en surbrillance [javascript] - HTML/CSS - Programmation

Marsh Posté le 27-04-2002 à 12:46:14    

Bonjour à tous,
 
Comme dit dans le titre, j'aimerais que l'utilisateur de mon site puisse sélectionner une partie d'un texte (directement dans la page ou dans un champs de saisie, ça m'est égal) et que lorsqu'il clique sur un bouton, cette partie soit soulignée.
 
J'arrive déjà à ouvrir un popup avec juste la partie en question soulignée, ce qui est le but recherché vous me direz, mais sans le reste du texte, ce qui n'est pas vraiment le but recherché en fait.
 
Si vous connaissiez un moyen de savoir l'indice du caractère à partir duquel commence la sélection, ça résoudrait mon problème. Mes recherches ont abouti à une soi-disant propriété caretPos, mais je n'arrive rien à ne tirer.
 
Si quelqu'un avait une solution, ça serait vachement glop.

Reply

Marsh Posté le 27-04-2002 à 12:46:14   

Reply

Marsh Posté le 27-04-2002 à 15:22:01    

Personne ne sait ?
 
Allons, je ne peux y croire.

Reply

Marsh Posté le 27-04-2002 à 15:51:36    

indexOf(ssch, index) : retourne la position de la première occurence de la chaîne ssch en commençant à la position indiquée par l'entier index. Par défaut index vaut 0. Si chaîne pas présente retourne -1. Ex :
var chaine = new String('salut jeffres';)
chaine.indexOf('jef';) retourne 6.
 
Y'a aussi lastIndexOf() qui parcoure la chaîne en commençant par la fin.

Reply

Marsh Posté le 28-04-2002 à 11:59:42    

J'ai pensé à cette solution mais imagine que le gars veuille souligner un "e" au milieu du texte, je serais surpris qu'il n'y ait pas de e entretemps. Et si je savais où commencer la recherche, je n'aurais pas besoin de cette fonction.
 
Merci quand même, si t'as une autre idée n'hésite pas.

Reply

Marsh Posté le 29-04-2002 à 14:15:17    

Une autre suggestion ?


---------------
Jeffres
Reply

Marsh Posté le 29-04-2002 à 15:20:31    

regarde createTextRange() http://msdn.microsoft.com/workshop [...] trange.asp
 
ça te donne un 'pointeur' sur le texte sélectionné. tu peux ainsi le remplacer par autre chose, rajouter du texte / des balises avant / après, etc. sur ce forum c'est restreint au <textarea> mais ça s'utilise sur n'importe quelle sélection.

Reply

Marsh Posté le 29-04-2002 à 15:47:08    

Je connais createTextRange et j'arrive à rajouter des balises autour du texte sélectionné, mais ce que j'aimerais, ce n'est pas afficher un <u> et un </u> autour du texte, mais réellement que celui-ci soit souligné à l'écran.
 
Comment cela fonctionne-t-il quand on poste un message sur le forum pour que le message soit rajouté à la suite, avec la mise en forme qui lui a été donnée ?
 
Merci de ton conseil en tout cas.

Reply

Marsh Posté le 29-04-2002 à 16:05:57    

>> mais réellement que celui-ci soit souligné à l'écran.  
 
ha je viens de tester, et ça ne marche effectivement pas avec les variables du range. bon, y'a pasteHTML donc ça résoud le problème. tiens, un petit test :
 
<html>
<body>
 
<button onclick='updateSelection()'>souligner la sélection</button><p>
 
<script>
 for (i=0; i<100; i++)  document.write('texte à sélectionner ';);
 
 function updateSelection()
 {
  var range = document.selection.createRange();
  range.pasteHTML('<u>' + range.text + '</u>';);
 }
</script>
 
</body>
</html>
 
//
 
ça ne marchera que pour l'html 'standard'. pour les input comme <textarea>, c'est impossible à moins d'utiliser contentEditable : http://msdn.microsoft.com/workshop [...] editor.htm
 
 
>> Comment cela fonctionne-t-il quand on poste un message sur le forum pour que le message soit rajouté à la suite, avec la mise en forme qui lui a été donnée ?  
 
tu veux dire le formatage après l'envoi du message ? c'est fait en php.

Reply

Marsh Posté le 29-04-2002 à 17:58:39    

Tranquille ! Ca marche !
 
T'es trop balèze.
 
Quand je pense aux heures que j'ai passées à chercher un script à peu près semblable sur Internet sans même avoir vu une seule fois parseHTML, ça me met bien les nerfs.
 
D'ailleurs, j'aimerais savoir s'il existe un site comportant une documentation exhaustive sur le javascript (genre javadoc), parce que les exemples de script, ça va 5 secondes mais j'aimerais bien fournir un minimum de réflexion à la base. Seulement c'est impossible si je n'ai pas tous les éléments du langage en ma possession étant donné que je débute.
 
Enfin je suppose que tu vois ce que je veux dire. Si tu pouvais une fois de plus me venir en aide.
 
Merci pour tout.
 
PS : pour ce qui est de contentEditable, je ne vois pas trop en quoi ça pourrait me permettre de souligner au sein d'une textArea, d'après ce que j'ai compris, ça sert uniquement à rendre la zone modifiable ou non. Encore une fois, une doc me serait bien utile, c'est pas glop.

Reply

Marsh Posté le 29-04-2002 à 18:27:28    

pasteHTML et pas parse ... ;)
 
le gros problème en js, c'est que tu ne peux trouver que ce que tu connais déjà (opinion personnelle). ie, c'est à force de se balader sur qq sites web, qq références, bref de glaner qq exemples et qq noms de fonctions que tu pigeras bien l'api. le langage en lui-même n'est pas très compliqué, par contre ça peut être assez chiant de trouver la méthode qui fait ce que tu veux.
 
pour une référence du langage, http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM
 
pour une faq exhaustive, http://developer.irt.org/script/script.htm
 
l'allié le plus précieux : google, évidemment. par ex, chercher createTextRange() te donne http://msdn.microsoft.com/workshop [...] trange.asp , qui te donne un lien vers TextRange http://msdn.microsoft.com/library/ [...] trange.asp, dont tu peux voir la méthode pasteHTML. attention car là on se balade dans le royaume microsoft, si tu veux être compatible tu regardes la partie 'standards' en bas de chaque page. tu verras un lien vers le w3 si la fonction est officielle.
 
autre 'tip', , tu peux chercher par défaut uniquement sur la msdn avec google. chercher 'appendChild site:msdn.microsoft.com' te donnera http://www.google.com/search?q=app [...] rosoft.com , ce qui est ce que tu cherches : la fonction parmi la liste des fonctions js.
 
etc. tu peux commencer par l'intro au dhtml sur la msdn : http://msdn.microsoft.com/library/ [...] _entry.asp
 
(la msdn reste à mon avis le site le plus complet sur javascript niveau référence & tutorials, même si y'a pas mal de truc propriétaires).
 
//
 
pour contenteditable : si, ça te permettra de souligner du texte dans un <textarea>. c'est vrai que l'exemple ne comporte pas de soulignement :D
 
tu appliques la méthode google, tu tombes sur la msdn, sur la page des liens 'show example' et 'show me'. les premiers contiennent souvent uniquement du code, mais parfois des démos. 'show me' est toujours une démo. ici, tu auras la possibilité de souligner ton texte.

Reply

Marsh Posté le 29-04-2002 à 18:27:28   

Reply

Marsh Posté le 29-04-2002 à 18:31:57    

et un autre site assez sympa :
 
http://www.webreference.com/programming/javascript/

Reply

Marsh Posté le 30-04-2002 à 09:40:45    

OK, merci, je vais essayer d'appliquer ta méthode.
 
Sympa de t'être pris la tête pour moi  :pt1cable: .
 
A plus.


---------------
Jeffres
Reply

Marsh Posté le 30-04-2002 à 14:38:56    

Après vérification, le script suivant permet d'écrire dans ce qui pourrait s'apparenter à une textarea, mais qui n'en est en fait pas une puisque ce n'est qu'une simple balise DIV (balise qui reste bien mystérieuse, on ne peut qu'en convenir).
 
Voici le script :
 
<html>
 
<body>
 
<DIV contenteditable ALIGN=left STYLE="  
background-color:white; font-face:Arial; height:100px;
border:inset black; margin : 5%; scrollbar-base-color:orange;overflow=auto;">
</div>
 
<p>
<input name="b_souligner" type="button" value="Souligner la sélection" onclick='document.execCommand("Underline" );'>
</p>
 
</body>
 
</html>
 
 
Le seul hic, et pas tout à fait négligeable, c'est que sous Netscape on peut toujours se brosser pour avoir un résultat convenable.
 
Enfin, c'est déjà ça.


---------------
Jeffres
Reply

Marsh Posté le 30-04-2002 à 14:41:15    

Tiens un smilet s'est incrusté dans mon script (?!).
 
Certain auront peut-être reconnu qu'il s'agit en fait de : o, allez, on s'en refait un petit :o.
 
Youpiiiiiii !!!!!!!!!!!!!!!!!!


---------------
Jeffres
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed