Problème highlight word

**olk2r** · 06/09/2006, 10h03

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;
}

**NeoMan** · 06/09/2006, 11h08

Pourquoi ne pas faire une recherche sur " table ", " td ", " tr " au lieu de "table", "td", "tr" ? Si c'est des mots entiers que tu veux souligner, il y a forcément au moins un espace avant et après (ah il peut aussi y avoir des '-' ou des '/' par exemple mais ça se gère très bien en expression régulière). Ainsi il ne prendra pas les "<table " du code source...

non ?

@++

NeoMan