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