5542 sujets

Sémantique web et HTML

Bonjour
Je cherche à mettre une petite barre de recherche sur une page web avec beaucoup de texte qui ferait exactement le même effet que "rechercher" (sans remplacer), en gros afficher en surbrillance les occurrences sur toute la page (sans recharger la page).

Je n'arrive pas à trouver d'infos vu que personne n'a besoin d'utiliser ça vu que ca existe déjà en crtl F. C'est un site qui s'adresse à des gens qui ne connaissent pas bien l'informatique et c'est pour les inciter à chercher dans la page sans avoir à leur apprendre à utiliser la fonctionnalité chercher/remplacer (je vous jure pour eux c'est compliqué).

Si vous avez des idées ou des liens, merci mille fois d'avance !
Salut,
j'ai un peu travailler sur ce que tu souhaite faire et je te propose 2 solutions. Je tiens d'abord à te signaler que ce problème devrait plutôt être posé dans la catégorie javascript car pour réaliser cela, il faut utiliser du javascript.

Tout d'abord voici le code :

<main>

  <input placeholder="votre recherche" id="search">
  <button onclick="update()">Rechercher</button>
  
  <div id="main">

  coucou ceci un texte qu'il faudra par la suite remplacer par autre chose de plus utilise. Ce texte ne sert ici à rien mais bon il faut du contenu pour pouvoir tester

<div/>
</main>


Ceci sera à modifier en fonction de ce que tu veut faire avec cette surbrillance.

.surbrillance{
  color: red;
}


Et voici le javascript :

const main = document.getElementById('main')
const content = main.innerHTML
const input = document.getElementById('search')

let update = function(){
  text = input.value
  texteARechercher = new RegExp(text, 'g')
  main.innerHTML = content.replace(texteARechercher, '<span class="surbrillance">'+text+'</span>')
}


Cela fonctionne. Si tu as des questions sur comment cela fonctionne n'hésite pas.

Je te propose cependant une deuxième solutions moins performante si il y a beaucoup de contenun et qui pourrai être problématique sur des ordinateurs lents:

<main>

  <input placeholder="votre recherche" id="search" onkeyup="update()">
  
  <div id="main">

  coucou ceci un texte qu'il faudra par la suite remplacer par autre chose de plus utilise. Ce texte ne sert ici à rien mais bon il faut du contenu pour pouvoir tester

<div/>
</main>


Cela actualise la surbrillance à chaque fois que tu entres quelque chose dans la bare de recherche. (c'est plus pratique mais moins puissant)
Meilleure solution
Génial comme solution. Vraiment pas mal du tout !

Je suggère une petite modification pour le rechercher/remplacer :
content.replace(texteARechercher, '<mark>'+text+'</mark>');
Houa ! Il est super propre, quel boulot, je n'en demandais pas tant merci beaucoup !!! Je me sens meme un peu mal à l'aise d'avoir même pas rédigé une ligne mais bon haha merci !
Smiley merci Smiley loveu
Par contre le bénéfice d'avoir le comportement de son navigateur remplacé ? A part de la confusion ou de l'agacement, mieux vaut apprendre à la personne à ce servir de ce que fait déjà son navigateur.