Principe de la fonction "rechercher"

**Beginner.** · 21/05/2015, 01h39

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** · 21/05/2015, 08h26

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** · 21/05/2015, 14h05

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** · 21/05/2015, 15h43

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** · 21/05/2015, 18h48

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** · 21/05/2015, 19h47

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

Envoyé par Beginner.

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

**Beginner.** · 22/05/2015, 04h53

Envoyé par 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.

Envoyé par 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.

Oui effectivement c'est notamment à cette fonction a laquelle je pensais... Mais quand vous dites que ça n'a rien à voir avec le JavaScript, vous voulez dire que le navigateur n'utilise pas JavaScript pour réaliser cette fonction ?

Mais si on veut faire ce genre de fonction comment on pourrait faire ? Quel est le principe ? Par exemple on sait qu'on peut ajouter des plugins à Firefox et ces plugins on doit les écrire en JavaScript ou c'est un autre langage qui est utilisé ?

De toute façon, en fait, ce serait pour le faire dans un programme Java qui utilise le WebView (JavaFX) (exemple : SwingSimpleBrowser)...Il s'agirait donc d'ajouter la fonction "recherche" dans la page html affichée par ce composant (qui est capable d’exécuter du JavaScript justement).

Envoyé par melka one

jour

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

Merci et deux fois +1 ! Tu as répondu indirectement à ma question sur le principe et apparemment (du moins si j'ai bien compris) comme je le soupçonnais tu ajoutes bien des balises (ici la balise ) aux mots ou phrases trouvés et tu appliques un CSS à cette balise...

Merci pour l'exemple, il est instructif, je l'ai testé et ça marche bien sous firefox mais pas sur IE8...

Envoyé par NoSmoking

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

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

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

Donc l'usage des balises est obligatoire ?

J'ai voulu essayer de savoir comment faisaient les outils comme FireBug avec son "inspecteur" qui fait la correspondance entre le code source et la page html affichée, c'est-à-dire par exemple quand on survole avec la souris une balise dans le code source cela met la partie correspondante (affichée dans le navigateur) en surbrillance afin de pouvoir la localiser visuellement ce qui est bien pratique comme vous le savez...

Alors je me suis dit que pour faire cela il devait appliquer un style particulier à la balise en question...

Qu'en pensez-tu ? Et les autres membres, vous en pensez quoi ? Auriez-vous des idées ?

Merci.

**Beginner.** · 24/05/2015, 03h25

Envoyé par NoSmoking

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

J'ai réfléchi à la question de savoir comment faire cette recherche sur tout le texte (affiché) de la page html et effectivement on se heurte notamment au problème de la présence des balises...

On pourrait simplement faire la recherche sur le texte de l’élément body par exemple, on accéderait au texte par la propriété document.body.textContent... Mais après se pose le problème de repérer l’expression trouvée dans la page html (avec les balises) pour pouvoir entre autres la mettre en surbrillance.

Envoyé par NoSmoking

Envoyé par Beginner.

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 justement ? On est bien d'accord que nous parlons bien de repérer l’expression trouvée dans la page html (avec les balises) pour pouvoir entre autres la mettre en surbrillance ? (Comme le fait le code proposé par melka one).

Enfin j'ai une idée de comment faire mais je ne l'ai pas testée !

Mais si quelqu’un a d'autres idées (pas forcément un code mais le principe) je suis preneur...

Merci.

**Auteur** · 24/05/2015, 15h22

Envoyé par Beginner.

De toute façon, en fait, ce serait pour le faire dans un programme Java qui utilise le WebView (JavaFX) (exemple : SwingSimpleBrowser)...Il s'agirait donc d'ajouter la fonction "recherche" dans la page html affichée par ce composant (qui est capable d’exécuter du JavaScript justement).

L'idée est d'avoir en mémoire l’arborescence de ta page puis d'analyser les mots sans tenir compte des balises. Puis lorsqu'une occurrence est trouvée d'injecter la balise nécessaire (et son style) à l'endroit voulu et de réafficher la page avec cette nouvelle structure. En java il existe la bibliothèque JDom qui permet de naviguer dans les noeuds du document.

**Beginner.** · 25/05/2015, 14h48

Envoyé par Auteur

L'idée est d'avoir en mémoire l’arborescence de ta page puis d'analyser les mots sans tenir compte des balises. Puis lorsqu'une occurrence est trouvée d'injecter la balise nécessaire (et son style) à l'endroit voulu et de réafficher la page avec cette nouvelle structure. En java il existe la bibliothèque JDom qui permet de naviguer dans les noeuds du document.

Merci pour l'idée et +1 ! Oui j'y avait pensé mais je me suis dit que ça pourrait être long de ré-afficher toute la page si celle-ci est longue mais bon peut-être qu'en réalité ça va plus vite que je ne le pense.

J'étais parti pour essayer de faire la recherche dans la page à l'aide d'une fonction qui ignore les balises et une fois le mot trouvé d'injecter la balise avec son style comme tu dis mais ensuite au lieu de ré-afficher toute la page à chaque recherche je me suis dis que j'allais essayer d'identifier l’élément (balise) dans lequel se trouve le mot trouvé et ensuite changer juste le innerHTML de cette élément (balise).

Mais le problème c'est d'être capable d'identifier cet élément (avec son chemin ou autre chose) pour pouvoir changer son innerHTML ! Si il a déjà un ID c'est facile et si il n'en pas je pourrais lui donner un identifiant temporaire ?

Qu'en pensez-vous ?

PS : Je ne connaissais pas JDOM je vais regarder... (pour l'instant j'avais vu jsoup...)

**Beginner.** · 25/05/2015, 22h55

Salut,

Je viens de découvrir l'existence de la balise , il semblerait qu'elle soit fait pour ça, ce serait mieux de l'utiliser que d'utiliser une autre balise comme ou autre...

Je viens aussi de découvrir le plugin "SearchHighlight" : http://www.jquery.info/The-plugin-SearchHighlight

Mais bon j'aime quand même comprendre le principe et si c'est faisable sans librairies ou plugins supplémentaires...

**NoSmoking** · 28/05/2015, 17h01

Je viens de découvrir l'existence de la balise , il semblerait qu'elle soit fait pour ça...

sémantiquement parlant est meilleur mais comme il y à du dynamisme dans ta page de part la recherche l’importance est bien moindre et un ferait également l'affaire.

Mais bon j'aime quand même comprendre le principe...

pour le principe il te faut parcourir tous les noeuds enfants de l'élément dans le quel tu veux effectuer ta recherche.

● Si c'est un TEXT_NODE tu vérifies si le texte cherché est contenu dans sa propriété data ou nodeValue
┗ SI oui tu découpes le noeud via la méthode splitText et tu crées un éléments que tu insères à la place du texte trouvé.
● Si c'est un ELEMENT_NODE et qu'il a des childNodes tu repasses ci dessus.

La fonction sera donc récursive.

**Beginner.** · 28/05/2015, 18h42

Merci +1 et je mets résolu.

Justement il y a un exemple de code pour ceux que cela intéresserait : https://github.com/bartaz/sandbox.js...y.highlight.js

La page d'explication : http://bartaz.github.io/sandbox.js/j...light.html#how

Par contre cela ne fonctionne pas si le mot recherché n'est pas entièrement compris à l'intérieur d'un élément :

but be aware that this plugin will only find text that is contained by single element, so if search term will be splitted into more than one node, it wont get highlighted.

**NoSmoking** · 29/05/2015, 15h04

Par contre cela ne fonctionne pas si le mot recherché n'est pas entièrement compris à l'intérieur d'un élément :

Les navigateurs travaillent un niveau au dessus du tien, au niveau de l'affichage et non pas de la structure, ils peuvent faire des choses qui te sont inaccessibles.
Tu pourrais y arriver mais en faisant une analyse préliminaire sur le textContent par exemple et si trouvé à toi de jouer.

D'autres parts, fais des essais en mettant du texte à trouver dans un INPUT ou dans une TEXTAREA, suivant les navigateurs les choses pourront être différentes.
De tête IE colorait les mots mais le rendait non modifiable, FireFox/Chrome les font disparaitre, magique

**Beginner.** · 29/05/2015, 22h13

Merci. Oui chercher dans le textContent c'est facile mais après comment repérer le mot trouvé dans la page pour le mettre en surbrillance ?

On pourrait faire la recherche directement dans le innerHTML de l’élément body en ignorant les balises (j'ai déjà fait un truc de ce genre en java c'était une recherche qui ignorait les voyelles), une fois le mot trouvé ajouter des balises pour la surbrillance après on "charge" le nouveau innerHTML de l’élément body...

Mais justement à ce niveau-là je me demandais si c'était pas long de recharger tout le innerHTML et si oui je me disais qu'il faudrait juste recharger le plus petit innerHTML contenant le mot trouvé mais ensuite comment trouver cet élément et son chemin ?

Par exemple si j'ai

Code html :

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

1
2
3
4
5
6
7
8
 
<body>
    <div>
        <p>Ceci est texte dans paragraphe...</p>
        <p>Ceci est un deuxième paragraphe...</p>
        <p>Et un troisième contenant le mot recherché : beginner (oui mon pseudo).</p>
    </div>
</body>

Et que je cherche le mot "beginner" j'ajoute alors des balises autour du mot et ensuite plutôt que de recharger le innerHTML du body je me disais que ce serait peut-être mieux de ne recharger que le innerHTML du troisième paragraphe mais pour cela il faudrait que j'ai le chemin de ce troisième paragraphe, non ? Ou bien il y a un autre moyen ?

**NoSmoking** · 30/05/2015, 16h36

Dans le cas de mot à "cheval", la recherche dans le textContent reste triviale, un coup de indexOf ou un match, si l’occurrence est trouvée il suffit à partir de la position trouvée rechercher la fin de celle ci dans le innerHTML, en effet quoiqu'il arrive si il y a présence de balisage l’occurrence se trouvera au mieux tout de suite au pire...!!! mais jamais avant.

Là où cela va se corser c'est qu'il faut trouver le vrai début pour respecter le balisage.

Exemple recherche de Monsieur
textContent :

Ce Monsieur...

innerHTML :

Ce <b>M</b>onsieur...

au final il FAUT avoir

Ce <mark><b>M</b>onsieur</mark>...

et non

Ce <b><mark>M</b>onsieur</mark>...

Mais justement à ce niveau-là je me demandais si c'était pas long de recharger tout le innerHTML

c'est surtout bien moins élégant et moins performant

Ou bien il y a un autre moyen ?

celui de la recheche dans les noeuds et de l'encadrement par une balise comme expliqué plus avant cela n'a rien de compliqué

**Beginner.** · 31/05/2015, 00h19

Envoyé par NoSmoking

Dans le cas de mot à "cheval", la recherche dans le textContent reste triviale, un coup de indexOf ou un match, si l’occurrence est trouvée il suffit à partir de la position trouvée rechercher la fin de celle ci dans le innerHTML, en effet quoiqu'il arrive si il y a présence de balisage l’occurrence se trouvera au mieux tout de suite au pire...!!! mais jamais avant.

Là où cela va se corser c'est qu'il faut trouver le vrai début pour respecter le balisage.

Exemple recherche de Monsieur
textContent :

Ce Monsieur...

innerHTML :

Ce <b>M</b>onsieur...

au final il FAUT avoir

Ce <mark><b>M</b>onsieur</mark>...

et non

Ce <b><mark>M</b>onsieur</mark>...

Oui ça cela me semble pas trop difficile à faire...

Envoyé par NoSmoking

c'est surtout bien moins élégant et moins performant

celui de la recheche dans les noeuds et de l'encadrement par une balise comme expliqué plus avant cela n'a rien de compliqué

Mais par contre ça, ça me semble déjà bien plus difficile curieusement... La solution proposée par Tim Down avec notamment la fonction getTextNodesIn(node) je ne crois pas que j'y aurais pensé...

**Beginner.** · 02/03/2016, 23h33

Salut,

Je viens de découvrir les fonctions find et findText (exemples de liens : find et findText), cela m'étonne de ne pas en avoir entendu parlé auparavant...

Ces fonctions semblent fonctionner même quand le mot recherché n'est pas entièrement compris à l'intérieur d'un élément ce qui n'est pas rien (par exemple le plugin "SearchHighlight" ne fonctionne pas dans ce cas...).

Presque tout est fait là ? Avec une simple fonction ? Cela m'étonne car j'en ai lu plusieurs dont moi qui se prenaient la tête dessus...

Ceci dit il y a quelques limites quand même : par exemple il semble qu'on ne puisse pas choisir l'apparence (le style) du mot trouvé.

J'ai testé l'exemple donné dans le lien (find) : http://jsfiddle.net/kdq7f6k2/1

Qu'en pensez-vous ?

**Beginner.** · 04/10/2017, 00h47

Salut,

Avec la fonction window.find(), il ne m'a pas semblé qu'il soit possible de définir son propre style et de l'affecter à tous les mots en même temps (il semble que cette fonction effectue une seule recherche à la fois...) mais on peut le faire sois-même en ajoutant des petites choses... J'ai fait un test de cela (c'est-à-dire en utilisant la fonction window.find()) ici : http://jsbin.com/cenahusome/edit?js,console,output ...
Le code n'est pas trop long mais je pense qu'il doit être limité quand même... Il n'y a pas toutes les options...

Principe de la fonction "rechercher"

JavaScript

Partager

Partager