Bonjour les zhéros!

J'espère poster sur le bon forum... n'hésitez pas à me reprendre sinon.

La raison du post : Je travaille actuellement sur un site web où j'ai développé une fonction de recherche interne (CAD quand je tape le mot "coucou", la recherche m'affiche toutes les annonces avec "coucou" et une ancre me permet de me rendre directement sur l'annonce).

J'aimerais rajouter à ça la possibilité de colorer le mot en question directement sur la recherche (un peu comme quand on fait CTRL+F et que le mot que l'on cherche prend une couleur).

Seulement je n'ai pas d'idée. Comment faire?

A mon avis c'est compliqué. Heureusement jQuery facilite la vie et sous forme de plugin on peut retrouver cette fonctionnalité (exemple).

Tu peux également le faire en php via des regex.

(Tu ajoute une balise span lors de l'affichage des résultats sur les articles)

Exemple :

<?php

$text = "Sample sentence from KomunitasWeb, regex has become popular in web programming. Now we learn regex. According to wikipedia, Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor";
$text = preg_replace("/\b(regex)\b/i", '<span style="background:#5fc9f6">\1</span>', $text);
echo $text;

Citation : Maraumax

Tu peux également le faire en php via des regex.

Oui mais l'inconvénient est que c'est plus long à l'exécution et surtout : rechargement de page ! Sauf si tu le fais en Ajax, mais dans ce cas-là autant le faire en JS.

Citation : Desolation

Citation : Maraumax

Tu peux également le faire en php via des regex.

Oui mais l'inconvénient est que c'est plus long à l'exécution et surtout : rechargement de page ! Sauf si tu le fais en Ajax, mais dans ce cas-là autant le faire en JS.

Si il effectue sa recherche en php si peux inclure directement la coloration dans le code

Merci pour votre aide, j'apprécie.
Seulement, je n'arrive pas à bien saisir comment fonctionne le code que tu m'as donné Désolation

Ce n'est vraiment pas clair pour moi qui n'ai jamais fais de javascript...

Peux-tu me détailler un peu ?
Si quelqu'un à d'autres solutions aussi?...

En js pur, en reprenant le code de Maraumax

var searchString="ma recherche";
document.body.innerHTML=document.body.innerHTML.replace(new RegExp("("+searchString.replace(/([[\]()^$.?*|])/,"\\$1")+")","ig"),'<span style="background:#5fc9f6">$1</span>');

Bon après on peut l'améliorer en fonction de ce qu'on souhaite faire mais ça reste un POC

Un exemple, je cherche le mot "lorem" dans #paragraphe :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>
<script type="text/javascript" src="http://johannburkard.de/resources/Johann/jquery.highlight-3.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#paragraphe').highlight('lorem');
});
</script>
<style>
.highlight { background-color: yellow }
</style>
<p id="paragraphe">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Ca fonctionne bien Désolation.
Mon seul problème -> Je récupère le mot que je veux colorer via un formulaire.
Le mot est donc dans mon $_POST.... Je peux gérer ça avec le javascript?

essai au lieu de mettre lorem de mettre

<?php $lavaleurdeton$_POST ?>

tu dois définir la valeur de ton $_POST avant

Ca ne fonctionne pas

Quelqu'un d'autre?

Citation : a49p

Ca ne fonctionne pas

Quelqu'un d'autre?

Mon exemple fonctionne très bien. Donne plus de détails que "Ca ne fonctionne pas"...

J'ai testé la solution javascript de Desolation qui fonctionne seulement, il est impossible d'inclure des variables php dans le javascript donc mon problème est "comment récupérer la valeur de mon $_POST si javascript ne peut lire ma variable " ?

Citation : Desolation

$('#paragraphe').highlight('<?php echo htmlspecialchars($_POST['tavariable']); ?>');

Merci Maraumax, ça fonctionne comme ça.
Seulement ça fonctionne seulement dans le haut de mon code, mais dès que je passe la première balise php, même si je reviens en HTML après et que je tente la coloration, ça ne fonctionne pas.
Quelqu'un en sait plus que moi?...

Merci de regarder si le navigateur indique des erreurs avant de poster.

Où puis-je voir ça ?

http://www.siteduzero.com/tutoriel-3-3 [...] tml#ss_part_2

Ok, l'erreur est
"Uncaught SyntaxError: Unexpected token ILLEGAL"

La ligne de code correspondante :

$('#paragraphe').highlight('<?php echo htmlspecialchars($_POST['recherche']); ?>');

Ta page est bien en php hein ? Si tu regarde la source après la recherche quel est son contenu ?

Ma page est bien en php et après la recherche, mon $_POST à bien la bonne valeure

Citation : a49p

Bonjour les zhéros!

Zéro s'écrit sans h !

Sinon tu peux colorer les mot en C.S.S. mais ça à l'air difficile !