Discussion :

[Beginner.]

Salut,

Quel est le principe de la fonction "rechercher" ? Je parle la fonction qui permet de rechercher un mot ou une phrase dans le texte d'une page html.

Bon c'est clair qu'on peut faire une recherche dans une chaine mais les questions que je me pose sont les suivantes :

- Il faut bien avoir accès au texte de la page html, non ? C'est moins évident qu'il n'y parait apparemment...
- Comment repérer la position des éventuels mots ou phrases trouvés ?
- Et comment les mettre en surbrillance ? J'ai pensé qu'on pourrait changer leur "style" (par exemple changer leur couleur de fond) mais comment faire pour les repérer sans balises ? Faudrait-il en introduire temporairement ?

Merci.

[Bovino]

Tu parles de quoi au juste ?
Parce que sur un site, la fonction rechercher permet de trouver des pages du site contenant certains mots clés définis, mais il n'y a aucun rapport avec JavaScript.
Et pour rechercher une portion de texte sur la page, c'est relativement simple, mais encore une fois sans rapport avec JavaScript :
• appuyer simultanément sur CTRL + F ;
• entrer le mot à rechercher ;
• laisser la magie opérer.

[Auteur]

Je pense que Beginner fait allusion justement à la fonction rechercher qui existe dans le navigateur (ctrl+F).
C'est complètement indépendant de javascript, c'est le logiciel qui gère tout ceci.

[melka one]

jour

sinon j'ai ce code qui fonctionne pour les mot d'un texte contenu dans une balise pas pour des phrases

Code css :

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
#trtt span{
	background:red;
	cursor:pointer;
}
 
.dg{
	position:absolute;
}
 
.dg div{
	background-color:#bbbbbb;
	width:110px;
	border:1px;
	border-style:solid;
	cursor:pointer;
	color:white;
	padding-left:5px;
}

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
function syno_c(conteneur, lui) { //la fonction constructeur
  this.conteneur = document.getElementById(conteneur);
  this.nom = lui;
}
syno_c.prototype.dina = function (recherche) {
  var txt = this.conteneur.textContent;
  this.conteneur.innerHTML = '';
  var tbphrase = txt.split(' ');
  var pvpv = [
  ];
  for (var i = 0; i < tbphrase.length; i++) {
    if (tbphrase[i].indexOf('.', tbphrase[i].length - 1) != - 1 || tbphrase[i].indexOf(',', 0) != - 1 || tbphrase[i].indexOf('?', 0) != - 1 || tbphrase[i].indexOf('!', 0) != - 1 || tbphrase[i].indexOf(';', 0) != - 1) {
      var rev = tbphrase[i].substr(tbphrase[i].length - 1, 1);
      tbphrase[i] = tbphrase[i].substr(0, tbphrase[i].length - 1);
    } 
    else {
      var rev = null;
    }
    pvpv.push(rev);
    var mot = tbphrase[i]
    var posi = tbphrase[i].length - (tbphrase[i].length - recherche.length - 1)
    if (tbphrase[i].lastIndexOf(recherche, 0) != - 1 && recherche != '') {
      tbphrase[i] = '<span onclick="' + this.nom + '.choix(this,event,\'' + mot + '\')">' + tbphrase[i] + '</span>';
    }
  }
  for (var i = 0; i < tbphrase.length; i++) {
    if (pvpv[i] != null) {
      tbphrase[i] += pvpv[i];
    }
  }
  var phrase = tbphrase.join(' ');
  this.conteneur.innerHTML = phrase;
}
syno_c.prototype.choix = function (lui, e, mot) {
  lui.previousSibling.textContent += lui.textContent;
  lui.parentNode.removeChild(lui);
}
function syno_instance() { //instanciation de l'objet.
  is = new syno_c('trtt', 'is');
  document.getElementById('bb').onkeyup = function () {
    is.dina(this.value)
  }
}
window.addEventListener('load', syno_instance, false);

Code html :

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

1
2
3
4
5
6
<br>
 
<div id="trtt" class="editable" contenteditable="true" style='overflow:auto;width:400px;height:140px'>
    le joueur de football a réalisé un très beau tir. Ce tir, est venu se loger en pleine lucarne, le gardien a rien pu faire. c'est un tir exceptionnel que le gardien ne pouvait arreter.
</div>
<input id='bb' type='text'>

[melka one]

pourquoi faire compliqué quand on peut faire simple

mots et phrase

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
function syno_c(conteneur,lui){		//la fonction constructeur
    this.conteneur=document.getElementById(conteneur);
    this.nom=lui;
}
syno_c.prototype.dina=function (recherche){
    var txt=this.conteneur.textContent;		
    this.conteneur.innerHTML='';			
    var replacer='<span onclick="'+this.nom+'.choix(this,event,\''+recherche+'\')">'+recherche+'</span>';
    var maRegex = new RegExp(recherche,'g');
    var txt = txt.replace(maRegex, replacer); 
    this.conteneur.innerHTML=txt;
}
syno_c.prototype.choix=function(lui,e,mot){
    lui.previousSibling.textContent+=lui.textContent;
    lui.parentNode.removeChild(lui);
}
function syno_instance(){		//instanciation de l'objet.
    is=new syno_c('trtt','is');
    document.getElementById('bb').onkeyup=function(){is.dina(this.value)}
}
window.addEventListener("load",syno_instance, false);

[NoSmoking]

Bonjour,
ces méthodes ne tiennent pas compte d'un éventuel balisage.

Comment repérer la position des éventuels mots ou phrases trouvés ?

Il te faut les cibler là où ils se trouvent dans le code.

mais comment faire pour les repérer sans balises ? Faudrait-il en introduire temporairement ?

quoiqu'il arrive il te faudra bien mettre des balises si tu veux appliquer un style particulier