[Résolu] Positionnement dynamique dans une page

bonjour,
bon, je ne m'en sors pas alors j'appelle au secours.
En insérant un code récupéré j'ai pu placer une barre de recherche dans ma page html. Il me surligne bien le(s) mot(s) trouvés. Mais j'aimerais bien que la page se positionne sur le 1er mot trouvé
et (si possible) quand on fait CR/entrée elle se positionne sur le suivant

cé possible ça?
ci-dessous le code:
document.addEventListener( 'DOMContentLoaded',function(){
var searchpara=document.getElementById("search_para").innerHTML;
searchpara=searchpara.toString();
document.getElementById("search").onclick =function ()
{highlight_word(searchpara)};
},false);
function highlight_word(searchpara) {
var text=document.getElementById("search_text").value;
if(text) {
var pattern=new RegExp("("+text+")", "gi");
var new_text=searchpara.replace(pattern, "<span class='highlight'>"+text+"</span>");
document.getElementById("search_para").innerHTML=new_text;
}
}

merci de bien vouloir vous pencher sur ce problème
bien cordialement

Bonjour,

curieux a écrit :
bon, je ne m'en sors pas

Pas étonnant !

Déjà, j'espère que t'as de bonnes raisons de vouloir faire ça, vu que les navigateurs le font sans qu'on ait besoin de coder quoique ce soit.

Si toutefois tu veux vraiment faire ça, tu peux essayer d'ajouter un id à chaque "<span class='highlight'>" (id différent pour chaque span évidemment).

Ensuite, pour que le CR/entrée se positionne sur le <span> suivant, il faudra rajouter un autre document.addEventListener pour (par exemple) l'évènement "keydown" qui se déclenchera suite à l'appui sur un touche du clavier, et dans la fonction qui sera déclenchée il faudra tester :
1) si l'utilisateur est en train de faire une recherche (c'est à dire s'il y a des mots soulignés)
2) si l'utilisateur vient d'appuyer sur un CR/entré
3) regarder quel est <span> sur lequel on était positionné
4) déduire quel est l'id du suivant
5) finir par un location.href = "#"+id; où id est l'id du span suivant sur le quel il faut se positionner.

Note qu'en bas de page, le <span> sur lequel il faudra se positionner ne sera pas forcément en haut de page.

Il peut être intéressant de colorier les span avec des couleurs différentes (une couleur pour le dernier span sur lequel on s'est positionné, et un autre couleur pour les autres span).

Amicalement,

un grand merci pour ta réponse

"Déjà, j'espère que t'as de bonnes raisons de vouloir faire ça, vu que les navigateurs le font sans qu'on ait besoin de coder quoique ce soit."
Si tu songes au crtl-f, certains ne le connaissent pas ou ignorent comment l'activer (si même c'est possible) sur un smartphone. Une autre raison est que je suis... curieux et que ce problème m'a obligé à me pencher sur le JavaScript et je trouve formidable tout ce que l'on peut faire avec.

"Si toutefois tu veux vraiment faire ça, tu peux essayer d'ajouter un id à chaque "" (id différent pour chaque span évidemment)."
A chaque quoi?
si tu veux parler de DIV, certaines pages n'en ont qu'un seul. Ex:
http://germination.free.fr/Index-chapitres.html
... et sur d'autres il est très étendu. Ex:
http://germination.free.fr/But-de-la-vie.html
(je n'ai mis la barre pour l'instant que sur ces 2 pages)
C'est pourquoi j'aimerais éviter d'avoir à le parcourir pour trouver le mot souligné

Par contre j'ai des ancres et je peux en rajouter...

Pour déjà me positionner sur la 1ere occurrence, j'ai essayé :
var pos = ZoneDeRecherche.search(Chaine); (oui j'ai mis des noms plus parlants)
ça me donne effectivement la position en nb de caractères mais je ne sais pas quoi en faire.

voilà voilà...
bien cordialement,
daniel

Bonjour,

curieux a écrit :
"Si toutefois tu veux vraiment faire ça, tu peux essayer d'ajouter un id à chaque "" (id différent pour chaque span évidemment)."
A chaque quoi?

A chaque "span" (effectivement, le mot span a disparu).

Ton code javascript ajoute des balises "span" autour des mots à souligner.

C'est lors de la création de ces span que je proposais de leur ajouter aussi un id, pour qu'ils puissent ensuite servir d'ancres.

Amicalement,

c'est une idée superbe! merci beaucoup, j'ai compris et... ça marche
je peaufine ça et je te montre

encore mille mercis
daniel

bonsoir parsimonhi
pour pouvoir ajouter un Id différent à chacun de mes span je ne fais plus un replace global mais j'avance chaine trouvée par chaine trouvée:
pos = ZoneHTML.indexOf(Chaine, pos_ZoneHTML);

mais comme
ZoneHTML=document.getElementById("Zone_Recherche").innerHTML;
je trouve des chaines qui sont normalement cachées entre des balises html. Ex: 'messager' avec :
<a href="javascript:ouvre_popup('Sylvie.html')" class="infoB" title="[ Sylvie Lorain-Berger (médium) : `Les messagers` ]">blabla...

seul :
ZoneTEXT=document.getElementById("Zone_Recherche").innerText;
permet de les ignorer et de trouver les vrais chaines
mais je ne trouve pas comment transposer la position de la ZoneTEXT en ZoneHTML qui seule affiche une page correcte

je ne crois pas que ce soit possible mais peut-être as-tu une autre idée géniale...
merci de ton avis
bien cordialement,
daniel

bonjour parsimonhi

te prends pas la tête, j'ai pensé à un truc, je vais l'essayer!

bonne journée
daniel

ben ça marche pô

pour vérifier si ma chaine est vraiment hors balises HTML, je pensais transformer en innerText ma portion HTML :
var Zone_TEXT=Zone_HTML.innerText;
-> Zone_TEXT=undefined

si tu as une autre idée...

bien cordialement,
daniel