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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [javascript] Souligner une partie d'un texte mise en surbrillance

jeffres

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.

Publicité

jeffres

Personne ne sait ?

Allons, je ne peux y croire.

Dost67

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.

Jeffres2

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.

jeffres

Une autre suggestion ?

---------------
Jeffres

youdontcare

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.

jeffres

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.

youdontcare

>> 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.

jeffres

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.

youdontcare

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

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.

Publicité

youdontcare

et un autre site assez sympa :

http://www.webreference.com/programming/javascript/

jeffres

OK, merci, je vais essayer d'appliquer ta méthode.

Sympa de t'être pris la tête pour moi :pt1cable: .

A plus.

---------------
Jeffres

jeffres

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

jeffres

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 .

Youpiiiiiii !!!!!!!!!!!!!!!!!!

---------------
Jeffres

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[JavaScript] Recuperer en JS une fenetre ouverte avec window.open	[JS+PHP]mailto avec un texte dans le message de plus d'une ligne
pb pour sortir d'une fonction Javascript!!	[JAVASCRIPT] ajouter en cliquant
[javascript (facile)] fermer une fenêtre ...	[VBA] Fusionner le texte de cellules contigues en VBA Excel (Urgent)
[C++Builder] Effacement de texte dans un canvas	Lien-javascript pour retourner en arriere et de faire un "refresh"
[HTML + JAVASCRIPT + FLASH...]	[PHP, Javascript ou autre] Ouvrir une fenêtre basique
Plus de sujets relatifs à : [javascript] Souligner une partie d'un texte mise en surbrillance

Page générée en 0.058 secondes