Bonjour à tous,

je cherche à réaliser un moteur de recherche interne pour une page html de type google bar (highlight)...
pour cela j'utilise le innerHTML

Code : Sélectionner tout - Visualiser dans une fenêtre à part
page_content = document.body.innerHTML;
puis je modifis le contenu avec une RegExp et un replace
et enfin je réaffectes le contenu modifié à mon innerHTML

Code : Sélectionner tout - Visualiser dans une fenêtre à part
document.body.innerHTML=new_page_content;
jusqu'ici tout va bien, en revanche le problème se complique lorsque je recherche un mot du même nom qu'une balise HTML (ex: table, tr, td...) : en effet la partie html recherche s'affiche dans la page (<td.. ).

Faut-il créer une expression régulière pour inhiber les balises (pour ne pas rechercher ma chaine dans les balises) ?
ou
Faut-il utiliser le textContent ? (mais sans pour autant perdre les styles)


Merci d'avance
Olive


Source complète:

Code : 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
 
// function color word
function KeyWordGetColor(idx)
{
  var color = '#CCCCCC';
  switch (idx)
  {
    case 0:
      color='yellow'; break;
    case 1:
      color='#99FF99'; break;
    case 2:
      color='#FFCCFF'; break;
    case 3:
      color='#CC99FF'; break;
    case 4:
      color='#99CCFF'; break;
    case 5:
      color='#FFCC99'; break;
    case 6:
      color='#CCCCFF'; break;
    case 7:
      color='#66CCFF'; break;
    default:
      break;
  }
  return color;
}
 
// function trim string
function allTrim(sString)
{
  while (sString.substring(0,1) == ' ')
  {
    sString = sString.substring(1, sString.length);
  }
  while (sString.substring(sString.length-1, sString.length) == ' ')
  {
    sString = sString.substring(0,sString.length-1);
  }
  return sString;
}
 
 
// function search string
nbterm=0;
function search()
{
  // recuperation de la chaine recherche
  searchTerms=document.getElementById("motcle");
  //creation du inner
  b = document.body.innerHTML;
  //excution de la fonction trim
  searchTerms=allTrim(searchTerms.value)
  searchArray = searchTerms.split(" ");
  for (var i = 0; i < searchArray.length; i++)
  {
    newcontent = dohighlight(searchArray[i], nbterm, b);
    nbterm++;
  }
  document.body.innerHTML=newcontent;
  return true;
}
 
// function highlight
function dohighlight(term, nbterm)
{
  s='('+term+')';
  x=new RegExp(s,'gi');
  alert(x);
  b=b.replace(x,'<span style=\'background-color:'+KeyWordGetColor(nbterm)+'\';>$1</span>');
  return b;
}