Discussion :

[RYMOOO]

Bonjour

Je sollicite votre aide par rapport à un point qui m'intrigue dans le java script , en fait j'ai fait une fonction qui sert à colorer les mots recherchés dans la page , cependant je dois actualiser la page avant chaque nouvelle recherche afin d'éviter d'avoir les résultats de plusieurs recherches dans la même page ,autrement dit je veux que le bouton OK (valide la recherche ) à la fois réactualise la page et exécute la fonction Recherche. après avoir recherche dans net j'ai trouvé Window.location.reload() ; cette commande exécute la réactualisation de la page ensuite la fonction Recherche d'une manière rapide , ce que j'ai pas compris est l'exécution rapide de la fonction sachant que j'ai mis la commande en premier . voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Recherche(id)
{Window.location.reload() ;
 var  elt   = document.getElementById(id) ;  
 var regex =/[a-z0-9]+/;    
 if (regex.test(elt.value))
  {
    motrecherche=elt.value ; 
	Parcours(document.body);
  }
 else 
 {
   elt.focus();	 
 }	 
}

Merci d'avance .

[NoSmoking]

Bonjour,
si tu reload ta page le javascript est remis à zéro donc ce qui suit l'instruction au mieux s’exécutera mais son effet disparaitra une fois la page rechargé et au pire ne sera même pas exécuté.

Si tu veux supprimer les surlignages il te faut reprendre les éléments surlignés et supprimer ce surlignement.
Jette un coup d'oeil à cette discussion : La fonction unwrap() en JS pur ? .

[RYMOOO]

Salut ,

En fait , ce que je veux est supprimer la surbrillance des mots trouvés , je peux dire remettre le DOM à son état initiale ,avec la fonction normalize () ca marchait pas , je viens de la tester , en ce moment je dois tester les autres fonctions et j'espère qu'elles répondent à ce que j'attends , d'autre part , je veux aussi exécuter ce traitement 5supprimer la surbrillance) quand l'utilisateur presse la touche ESC, cela m'amène à récupérer la référence de la touche ,et pour le reste je ne vois pas exactement comment l'implementer ???

je te dis merci pour le lien et bonne soirée .

[eleydet]

Bonjour,

C'est curieux comme les solutions auxquelles on pense diffèrent selon les individus. Voici quelques exemples :
- Recharger la page, en utilisant un cookie contenant le motif de recherche.
- Utiliser une variable contenant toute la page, que l'on replace à l'endroit adéquat quand on le souhaite.
- Utiliser deux pages identiques, une page appelant l'autre avec le motif de recherche dans l'URL.

[RYMOOO]

Bonjour

Pour les cookie j'ai pas encore regardé leur principe de fonctionnement , pour la deuxième proposition , je suppose que c'est intéressant de l'implémenter , si on dit une variable contenant la page , cela veut dire contenant le DOM , si tu parles de collection all , c'est une ancienne technique d'accès au DOM, n'est plus utilisable ,
j'aimerais bien savoir comment tu sauvegarde la page dans une variable , dont le but est réactualiser la page après des traitements différents .

j'attends ton retour .

[RYMOOO]

Rebonjour

Je viens de résoudre le problème de réactualiser la page , en effet je voulais annuler la surbrillance des mots recherchés après avoir effectué des recherches bien sûr ( ma fonction de recherche marche parfaitement) , j'ai constaté que window.location.reload() est à la fois actualise la page et ignore le reste de traitement , donc cette instruction n'apporte pas une solution , du coup j'étais obligée de modifier les balises SPAN qui ont été créés lors de la fonction recherche . ce qui me facilite cette tâche est outerHTML , voici la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function SupprimeSpanRecherche()
 {var tabspan =document.getElementsByClassName("SpanColor");
      while (tabspan.length)
	  {
	   tabspan[0].outerHTML=tabspan[0].innerHTML ;	         	
      } 		  
 }

En ce moment je dois me lancer dans l 'événement ESC . SUPPPPEEERRR

[eleydet]

Rebonjour,

Un exemple de solution, donc.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
 
<head>
<meta charset="utf-8">
<script>
 
var page="<p>Bla bla<br>Bla bla...</p>";
 
modifier=function() {
  var suite=document.createElement("p");
  suite.innerHTML="La suite...";
  document.getElementById("page").appendChild(suite);
  document.getElementById("page").style.color="#0b6";
};
 
onload=actualiser=function() {
  document.getElementById("page").innerHTML=page;
  document.getElementById("page").style.color="#60b";
};
 
</script>
</head>
 
<body>
<div id="page"></div>
<input type="button" onclick="modifier();" value="Modifier">
<input type="button" onclick="actualiser();" value="Actualiser">
</body>
 
</html>

[NoSmoking]

@eleydet :

- Utiliser une variable contenant toute la page, que l'on replace à l'endroit adéquat quand on le souhaite.

tu admettra que la méthode je réinjecte le innerHTML initial cela reste quand même un peu « bourrin » (pas très classe), même si cela marche, et n'est pas super si il y a du dynamisme dans la page.

@RYMOOO : quand je vois dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var tabspan =document.getElementsByClassName("SpanColor");

je pense que lors de ta recherche il faut que tu stockes dans un tableau les éléments surlignés ce qui te permet en bonus de les faire défiler ces éléments via un oElem.scrollIntoView().

[eleydet]

Bonjour,

NoSmoking a écrit :

tu admettra que la méthode je réinjecte le innerHTML initial cela reste quand même un peu « bourrin » (pas très classe), même si cela marche, et n'est pas super si il y a du dynamisme dans la page.

Je ne suis pas si catégorique. A mon avis, tout dépend du cas de figure. La solution retenue est liée aussi à l'humeur de l'informaticien. Elle présente souvent des avantages et des inconvénients, par rapport à d'autres solutions.

Regarde le code de l'application ci-dessous et tu comprendras ce que je veux dire. Dans le cas présent, les pages à afficher varient très fortement selon les données entrées par l'utilisateur (à l'exception de la page "aide").
http://eleydet.free.fr/BTS/applicati...sol/index.html

[NoSmoking]

Dans ton contexte cela est différent, tu construis/reconstruis le HTML, style utilisation de template, dans le cas d'un effacement d'une mise en surbrillance il s'agit d'une restitution du HTML initial.

Un exemple, simulation, de ce que j'évoquais

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Réinjection du innerHTML</title>
<meta name="Author" content="NoSmoking">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  font: 1em/1.25 Verdana;
}
h1, h2, h3 {
  color: #069;
}
header, section {
  margin: auto;
  max-width: 60em;
}
.ligne-flex {
  display: flex;
  align-items: stretch;
  height: 2em;
  padding: .25em;
  border: 1px solid #CCC;
  border-radius: 2px;
  line-height: 2em;
}
.ligne-flex > * + * {
  margin-left: 1em;
}
.search {
  background: #CDE;
}
select, input, button {
  min-width: 6em;
  font: inherit;
  line-height: 100%;
}
</style>
</head>
<body>
<header>
  <h1>Réinjection du innerHTML</h1>
  <p>Simulation de la recherche :</p>
  <p class="ligne-flex">
    <button onclick = "fctSearch()">Highlight</button>
    <button onclick = "fctClear()">Clear</button>
  </p>
</header>  
<section>
  <h1>Titulus</h1>
  <p>
    Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit.
    Pellentesque facilisis varius turpis, vitae porta justo pellentesque a.
    Aliquam semper pellentesque ligula. Etiam et <span>ipsum</span> nisl.
    Quisque venenatis gravida ex vel malesuada.
    Phasellus pellentesque <span>lectus</span> tristique, dapibus leo ac, sodales magna.
    Fusce dui risus, eleifend vitae turpis ac, congue scelerisque arcu.
    Curabitur ornare risus id diam condimentum, vel accumsan neque accumsan.
    Duis tortor ligula, rhoncus at ligula cursus, accumsan maximus tortor.
    Praesent vitae suscipit lacus. Suspendisse quis metus <span>lectus</span>.
    Mauris et est at purus tincidunt blandit.
  </p>
  <p class="ligne-flex">
    <select onchange="majInput(this);">
      <option value="">Choix</option>
      <option value="Lunae dies">Lundi</option>
      <option value="Martis dies">Mardi</option>
      <option value="Mercurii dies">Mercredi</option>
      <option value="Jovis dies">Jeudi</option>
      <option value="Veneris dies">Vendredi</option>
      <option value="Saturni dies">Samedi</option>
      <option value="dies Dominicus">Dimanche</option>
    </select>
    <label>latin :</label>
    <input type="text">
  </p>
</section>
<script>
var htmlBefore = '';
var oSection = document.querySelector('section');
function majInput(oSelect) {
  oInput = document.querySelector('input');
  oInput.value = oSelect.value;
}
function fctSearch() {
  htmlBefore = htmlBefore || oSection.innerHTML;
  var oElements = oSection.querySelectorAll('span');
  var ind;
  var nb = oElements.length;
  for (ind = 0; ind < nb; ind += 1) {
    oElements[ind].classList.add('search');
  }
}
function fctClear() {
  if (htmlBefore.length) {
    oSection.innerHTML = htmlBefore;
    htmlBefore = '';
  }
}
</script>
</body>
</html>

il suffit de jouer avec le <select>.