Surligner dynamiquement texte

Version imprimable

Bonjour,

J'ai récemment découvert les expressions régulières et je veux faire une page dans laquelle l'utilisateur viendrait entrer une expression régulière et les motifs qui sont présents dans un texte plus bas seraient surlignés (en rouge par exemple).
J'avais pensé à jquery pour venir surligner dynamiquement les portions de texte qui correspondent à la regex.

Voici mon code (basique) :
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 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type content="text/html"; charset="utf-8"/> <title>Test Regex</title> <style type="text/css"> #text_underline{ background-color: rgba(240,10,0,0.5); display: inline; border-radius: 4px; } </style> </head> <body> <p>Regex : </p> <input id="input_regex" type="text" name="Regex"> <button id="button_regex">Search</button> <br><br> <p id="text_analyse">Un texte qui contient des phrases qui sont longues.</p> <br> <script type="text/javascript" src="test.js"></script> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function get_regex(input){ //On crée notre regex var regex = RegExp(input.value); console.log(regex.toString()); //On extracte le contenu du texte à analyser text = document.getElementById("text_analyse").textContent; console.log(text); //On obtient le résultat de la regex var result = text.match(regex); console.log(result); } //On ajoute un eventListener à notre bouton document.getElementById("button_regex").addEventListener("click",function(){ get_regex(document.getElementById("input_regex")) });
J'ai plusieurs questions :

Quand je créé ma regex avec "var regex = RegExp(input.value);" je ne peux pas ajouter g à la fin pour indiquer que je veux avoir tous les résultats, ce qui par la suite ne me donne que le premier match
Comment accéder au contenu de mon "text_analyse" afin d'y inclure des balises avec un style qui correspond au "background-color"?
Le PHP est-il plus adapté pour ce genre de situation?

Merci d'avance

12/12/2018, 08h28
SpaceFrog

Procédons pas étapes

Code:

var regex = RegExp(input.value,"g");
12/12/2018, 09h16
ProgElecT

Salut

Cela ne répond pas à ta demande, mais sa améliorera la validation de ton code.
Ta ligne N°4 de ton code
<meta http-equiv="Content-Type content="text/html"; charset="utf-8"/> il manque un "
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
12/12/2018, 13h01
Beginner.

Salut,

Il y a eu plusieurs fils concernant ce sujet avec des exemples de code mais pour l'instant en voici un qui pourrait t'intéresser : Principe de la fonction "rechercher"...

On peut faire ça sans jQuery mais dans le fil il y a notamment un lien vers un code en JQuery mais ce code est limité : il ne fonctionne pas si le mot recherché n'est pas entièrement compris à l'intérieur d'une balise, c'est-à-dire si le mot est à cheval sur plusieurs balises.

A la fin j'ai posté un code qui n'a pas cette limite mais par contre je ne crois pas qu'on puisse utiliser des regex avec cette méthode...

Mais cela est tout-à-fait faisable avec regex et sans cette limitation... D'ailleurs des codes qui font ça existent mais cela peut être intéressant de le faire soi-même...
12/12/2018, 13h36
johhry

1 pièce(s) jointe(s)

@ProgElecT

Merci pour la précision ;)

@SpaceFrog

En effet ça marche, ce qui est dommage c'est que je n'ai plus l'indice du premier élément qui était trouvé avec "match" sans l'option "g".

Pièce jointe 433937

@Beginner.

Merci, je n'avais pas vu ce post. Je ne veux pas particulièrement effectuer une recherche sur la page entière mais seulement sur un texte spécifique. Je vais essayer de le faire moi même avec jQuery puis je reviens vers vous

Merci
12/12/2018, 13h52
Beginner.

Ben franchement pour faire cela je ne vois pas trop ce que jQuery apporterait de plus...

Si tu veux faire juste une recherche sur le texte d'un paragraphe qui ne contient pas de balise c'est assez simple à faire...
Et pour cela commence par la première étape que SpaceFrog a mentionnée...
12/12/2018, 14h12
CosmoKnacki

Citation:

Envoyé par johhry

En effet ça marche, ce qui est dommage c'est que je n'ai plus l'indice du premier élément qui était trouvé avec "match" sans l'option "g".

Pour retrouver toutes les informations sur une correspondance lors d'une recherche multiple, tu dois utiliser la méthode RegExp.prototype.exec() à la place de String.prototype.match(). Lis attentivement la documentation pour voir la manière dont on l'utilise.

Cela dit, comme ton but est de surligner, peut-être est-il plus simple d'utiliser directement la méthode String.prototype.replace().
12/12/2018, 14h22
Beginner.

Citation:

Envoyé par CosmoKnacki

Cela dit, comme ton but est de surligner, peut-être est-il plus simple d'utiliser directement la méthode String.prototype.replace().

Oui c'est vrai ce serait assez simple avec cette méthode à condition que le paragraphe dans lequel on cherche ne contienne pas de balise car autrement c'est plus compliqué...
12/12/2018, 14h46
CosmoKnacki

Je crois que pour l'instant il s'agit de simple texte.
Même avec des balises à l'intérieur ce n'est pas la mort, il suffit de créer une liste des nœuds textes, de faire la recherche avec la méthode exec() sur le textContent global, puis d'utiliser la position et la longueur des correspondances pour savoir dans quel(s) nœud(s) texte on se trouve pour appliquer les modifications.
12/12/2018, 14h54
Beginner.

Oui je suis d'accord ce n'est pas la mort, c'est juste plus compliqué...
Et je suis aussi d'accord avec l'idée de constituer une liste des nœuds textes, cela a été évoqué dans l'autre fil...

Voici une solution avec "replace" :

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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
	<title>Test Regex</title>
 
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
                #text_underline{
                        background-color: rgba(240,10,0,0.5);
                        display: inline;
                        border-radius: 4px;
                }
        </style>	
</head>
<body>
	<p>Regex : </p>
	<input id="input_regex" type="text" name="Regex">
	<button id="button_regex">Search</button>
	<br><br>
	<p id="text_analyse">La méthode replace() renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un modèle sont remplacées par un remplacement. Le modèle utilisé peut être une RegExp et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si modèle est une chaîne de caractères, seule la première correspondance sera remplacée.</p>
	<br>
	<script type="text/javascript" src="test.js"></script>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function get_regex(input){
	//on créé notre regex
	var regex = RegExp(input,"g");
	//On récupère le texte à analyser
	var text = $("#text_analyse");
	//On remplace le contenu html
	text.html(text.text().replace(regex,remplaceur));
}
 
//Fonction qui va remplacer le motif
function remplaceur(correspondance){
	return "<span id=\"text_underline\">"+correspondance+"</span>";
}
 
//On ajoute un eventListener à notre bouton
document.getElementById("button_regex").addEventListener("click",function(){
	//On transfère la valeur de l'input
	get_regex(document.getElementById("input_regex").value)
});

Citation:

Envoyé par johhry

Voici une solution avec "replace" :

Ben encore une fois je ne vois pas l’intérêt d'utiliser jquery d'autant plus que tu as utilisé la fonction document.getElementById("input_regex").value...

J'ai ré-écrit ton code sans jquery (il n'est pas tellement plus long, regarde les lignes 5 et 7...) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function get_regex(input) { //on créé notre regex var regex = RegExp(input, "g"); //On récupère le texte à analyser var text = document.getElementById("text_analyse"); // var text = $("#text_analyse"); //On remplace le contenu html text.innerHTML = text.textContent.replace(regex, remplaceur) ; //text.html(text.text().replace(regex, remplaceur)); } //Fonction qui va remplacer le motif function remplaceur(correspondance) { return "<span id=\"text_underline\">" + correspondance + "</span>"; } //On ajoute un eventListener à notre bouton document.getElementById("button_regex").addEventListener("click", function () { //On transfère la valeur de l'input get_regex(document.getElementById("input_regex").value) });
Une remarque cependant : un ID doit être unique donc il vaudrait mieux remplacer return "<span id=\"text_underline\">" + correspondance + "</span>"; par return "<span class=\"text_underline\">" + correspondance + "</span>";

12/12/2018, 16h02
johhry

Oui c'est sûr, ça n'a pas trop d'intérêt d'utiliser jQuery alors qu'on peut le faire avec js. (je me suis trop pris la tête :))
Justement j'avais vu innerHTML.

Merci pour vos messages

Bonne journée
12/12/2018, 16h05
Beginner.

Citation:

Envoyé par Beginner.

Une remarque cependant : un ID doit être unique donc il vaudrait mieux remplacer return "<span id=\"text_underline\">" + correspondance + "</span>"; par return "<span class=\"text_underline\">" + correspondance + "</span>";

ah oui il faut aussi remplacer #text_underline {...} par .text_underline {...} dans le CSS...