Rechercher un mot dans une page et aller directement au mot

Version imprimable

19/09/2018, 13h07
toulousain3117

Rechercher un mot dans une page et aller directement au mot

Bonjour à tous,

je vous écris ce jour car j'essaye de créer une fonction qui permet de rechercher un mot et y aller directement à la ligne du monde

la même fonction que firefox sur "Rechercher sur la page" est t'il possible de réaliser ce script en jquery ?

cordialement
19/09/2018, 15h10
Toufik83

oui c'est bien possible en utilisant indexOf(), et pour défiler la page on utilise scrollTo().
19/09/2018, 16h36
SpaceFrog

sauf que scrollTo sur quoi ??

il va falloir replacer l'occurrence du texte pour placer une balise avec une ancre pour arriver à y scroller...
23/09/2018, 23h01
toulousain3117

désolé du temps de réponse je n'étais pas revenu sur le forum,

est t'il possible sinon au click de simuler le ctrl f ?

j'ai pu trouver un script que j'ai legerement modifier pour qu'il correspond à mes attentes,

sur le pc ça fonctionne mais pas sur les mobiles vous aurez une idee ?

Code:

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
<script>
  $(document).ready(function() {
findString = function findText(text) {
  alert("String \x22" + text + "\x22 found? " + window.find(text));
}
 
$('#but').on('click', function() {
                
                var val = $("#search").val();
                FindNext ();
                        
        });
 
});     
  </script>
 
      <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }
 
            var supported = true;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = false;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }
 
                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }
 
           
        }
    </script>

Salut

Et si tu mes tout entre les mêmes balises <script> .... </script> (sans préciser type="text/javascript")

Code:

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
<script>
  $(document).ready(function() {
findString = function findText(text) {
  alert("String \x22" + text + "\x22 found? " + window.find(text));
}
 
$('#but').on('click', function() {
 
		var val = $("#search").val();
		FindNext ();
 
	});
 
});	
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }
 
            var supported = true;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = false;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }
 
                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }
 
 
        }
    </script>

24/09/2018, 14h10
toulousain3117

ça change rien

Aprés multe recherche voici afin une solution qui marche aussi sur mobile :

La fonction :

Code:

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
 
      <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Champs vide");
                return;
            }
 
            var supported = true;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = false;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }
 
                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }
 
 
        }
    </script>

L'appel de la fonction : je l'ai adapté en jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#but').on('click', function() {
 
		var val = $("#search").val();
		FindNext ();
 
	});
 
	$('#findField').on('focus', function() {
		$("html, body").animate({scrollTop: 0},"slow");
 
	});
 
});

et comme il n'y a pas la recherche vers le haut j'ai rajouté le script permettant de remonté en haut des que le curseur est dans le champs :

et enfin voila le bouton :

Code:

1
2
<input type="text" id="findField" value="" size="20" />
    <button id="but">Chercher</button>

13/10/2018, 22h56
marycaLou

Touches CTRL+F et recherche dans une page WEB

Bonjour,

Je suis débutante en HTML. J'ai une page Web dans lequel je veux aussi simuler les touches CTRL+F. EN lisant le code sur cette discussion,, je suis un peu perdu.
Où doit -on insérer le code du "Script" et le code "jQuery". Pour le bouton en HTML, pas de problème.

J'ai un fichier en HTML qui est relié à un fichier "CSS" seulement.

Merci

bonjour marycalou

Pour inséré le code tu dois mettre le script entre les balises <head></head>

le code tu dois aussi le mettre tel quel :
Code:

1 2 3 4 5 6 7 8 9 <script> $(document).ready(function() { // ici tes scripts jquery et function js }); </script>
et bien sur en haut de page les fichiers d'appelle a la librairie jquery pour que le code fonctionne
Code:

1 2 <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>