Comment créer un script de recherche HTML du type CTRL + F ?
Réponses rédigées par Antoine
Dernière mise à jour : 2020-11-16 00:41:28
Question
J'ai une page HTML sur laquelle je voudrais créer un champ de recherche dont le fonctionnement serait identique à celui d'un CTRL + F ; est-ce possible, si oui comment ?
Réponse
Pour créer un script de moteur de recherche du type CTRL + F pour une page HTML, vous pouvez utiliser la méthode JavaScript Window.find(). Celle-ci fonctionne comme une recherche CTRL + F.
Dans l'exemple ci-dessous un crée un champ texte dans lequel l'utilisateur peut saisir le mot qu'il recherche.
Sur le bouton de validation on ajoute onclick="Chercher()" qui lance la fonction JavaScript nommée Chercher().
Cette fonction récupère le mot clé dans la valeur du champ texte puis utilise la méthode window.find pour effectuer la recherche dans toute la page.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Comment créer un script de recherche HTML CTRL + F ?</title>
</head>
<body>
<input type="text" id="mot"><input type="button" onclick="Chercher()" value="Suivant">
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa nunc, facilisis in elit a, tincidunt egestas est. Vestibulum vel mi ut nisl dictum pulvinar. Proin maximus enim in enim tempor, et pretium tortor pellentesque. Cras rutrum lacinia sem quis mattis. Pellentesque pharetra id metus et euismod. Phasellus varius ante dolor, a accumsan nibh euismod a. Vestibulum purus tellus, fringilla in orci ac, varius consequat magna. Curabitur ut posuere augue, nec accumsan magna. Vivamus viverra faucibus fermentum. Nulla nibh tortor, ultrices pellentesque pharetra vel, ultrices eu odio. Proin maximus pellentesque gravida. Nulla sed neque ut ex mattis varius. Curabitur nec sollicitudin turpis. Nullam vel lectus vitae metus pharetra mattis. Nam eu dui ante. Nullam quam justo, vestibulum eu tincidunt et, convallis vel risus.
<br><br>
Donec nec metus elementum, maximus erat et, feugiat augue. Aliquam aliquam nibh sit amet malesuada fermentum. Aenean et sem tempus, aliquam nunc ac, pellentesque elit. Ut posuere nibh tortor, in aliquet quam semper nec. Aliquam eu lacus facilisis, hendrerit massa id, elementum sem. Fusce turpis neque, convallis a scelerisque at, laoreet eu sem. Nulla commodo, turpis id tempor pulvinar, augue magna iaculis libero, eu pretium ipsum risus eget ex. Pellentesque imperdiet ante et vulputate efficitur. Ut pretium velit nec dolor vehicula, eget venenatis velit maximus. Quisque nec tempor erat, nec vehicula elit.
<br><br>
Duis viverra, metus a ornare suscipit, tortor mauris vehicula velit, sed aliquet diam nunc vitae nulla. Cras lectus sem, congue in placerat nec, fringilla ut ligula. Morbi vitae sem purus. Aenean lacinia, lorem vel lacinia interdum, purus justo porta elit, at vestibulum turpis risus ut felis. Nullam in mi est. Morbi vel nisi viverra, condimentum massa nec, finibus tortor. Aliquam aliquet aliquam diam, vitae ornare tellus ornare at. Quisque tellus orci, iaculis posuere dignissim eu, mollis vitae sapien. Sed commodo eros massa, ut volutpat tellus egestas vitae. Integer tincidunt lacus metus. Etiam quis rhoncus velit. Suspendisse arcu sem, aliquam quis elit et, pretium commodo metus.
<br><br>
Proin gravida quam a nibh finibus, ac luctus turpis pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In malesuada interdum sodales. Integer mollis ligula non metus porta pharetra. Morbi semper nisi sapien, vel molestie nisi lacinia et. Cras eu lorem quis nisi molestie cursus ut a purus. Curabitur ut turpis id lacus feugiat commodo. Curabitur non sem nibh.
<br><br>
Sed congue mi id lorem fermentum, et scelerisque lectus mollis. Etiam sed odio arcu. Curabitur feugiat efficitur orci, vehicula tincidunt quam viverra et. Aliquam erat volutpat. Fusce et ex eu nisl porttitor sollicitudin. Phasellus id augue non urna semper scelerisque. Vivamus mi nunc, varius in lacinia nec, rutrum at metus. Proin sodales euismod dui, ac hendrerit leo posuere a. Nulla posuere arcu sed dui ultricies mollis non eu urna. Sed dignissim dapibus enim, vitae dictum velit varius vitae. Suspendisse lobortis vitae nisl nec venenatis. Vivamus interdum risus nec justo vehicula lobortis. Quisque quis velit dolor. Sed malesuada felis ac ante ullamcorper pretium. Quisque quis urna sit amet diam facilisis ornare non in ante.
<script>
function Chercher() {
var recherche = document.getElementById('mot').value;
window.find(recherche);
return true;
}
</script>
</body>
</html>