Surligner dynamiquement texte

**johhry** · 12/12/2018, 00h29

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 12/12/2018, 08h28

Procédons pas étapes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var regex = RegExp(input.value,"g");

**ProgElecT** · 12/12/2018, 09h16

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"/>

**Beginner.** · 12/12/2018, 13h01

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...

**johhry** · 12/12/2018, 13h36

@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".

Nom : Capture d’écran de 2018-12-12 13-31-03.png
Affichages : 2066
Taille : 14,9 Ko

Nom : Capture d’écran de 2018-12-12 13-31-03.png
Affichages : 2066
Taille : 14,9 Ko

@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

**Beginner.** · 12/12/2018, 13h52

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...

**CosmoKnacki** · 12/12/2018, 14h12

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().

**Beginner.** · 12/12/2018, 14h22

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é...

**CosmoKnacki** · 12/12/2018, 14h46

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.

**Beginner.** · 12/12/2018, 14h54

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...

**johhry** · 12/12/2018, 15h27

Voici une solution avec "replace" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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)
});

**Beginner.** · 12/12/2018, 15h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 "" + correspondance + ""; par return "" + correspondance + "";

**johhry** · 12/12/2018, 16h02

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

**Beginner.** · 12/12/2018, 16h05

Envoyé par Beginner.

Une remarque cependant : un ID doit être unique donc il vaudrait mieux remplacer return "" + correspondance + ""; par return "" + correspondance + "";

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

Surligner dynamiquement texte

JavaScript

Discussions similaires

Partager

Partager