bonjour à toutes et à tous !
j'ai bien essayé de me documenter, mais je n'arrive toujours pas à trouver de solution
j'ai lu le cours de Christophe PORTENEUVE "Enfin maîtriser les expressions rationnelles" et un tas d'autres trucs sur le sujet mais je ne trouve pas ...

Ce que je cherche à faire :
je dois déployer un lexique au travers de pages, c'est à dire qu'en fonction de mots ou expressions enregistrés dans la db, je dois afficher au passage de la souris la définition correspondante.
le passage de la souris et l'info-bulle, ça je gère en css, par le biais de span imbriqués avec une classe.
là où ca se gâte, c'est quand je cherche à identifier du texte et qu'il comporte des acents
j'ai testé un regex qui identifierait la chaine recherché et qui fonctionne plutôt bien, sauf en cas de caractères accentués.

une piste pour m'éclairer ?
je vous joint mon code de test, pas très joli je le reconnais mais les tests c'est pas fait pour être beau
d'avance merci

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Language" content="fr-FR" />
		<title>brouillon-lexique</title>
		<style>
			.bulle{
				background-color: #e6e6e6; /*gris 10%*/ border-bottom: black dashed 1px;
			}
			.bulle span{
				background-color: #1a1a1a; color: white;
				max-width: 350px;
				/*visibility: hidden;*/
				position: absolute;
				margin-top: 30px; margin-left: -50px; padding:10px;
				background-color: #1a1a1a; /*gris 90%*/ color: #e6e6e6; /*gris 10%*/
				font-family: Verdana, Geneva, sans-serif; font-style: italic; font-size: 12px; font-weight: normal; text-align: justify;
 
 
				-moz-box-shadow: 0px 10px 10px -10px #323232;
				-webkit-box-shadow: 0px 10px 10px -10px #323232;
				-o-box-shadow: 0px 10px 10px -10px #323232;
				box-shadow: 0px 10px 10px -10px #323232;
				filter:progid:DXImageTransform.Microsoft.Shadow(color=#323232, Direction=180, Strength=10);
 
 
 
				transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0);
				-webkit-transition: all 0.25s; -moz-transition: all 0.25s; -o-transition: all 0.25s;
				transition: all 0.25s;
			}
			.bulle span:after{
				content: '';
				position: absolute;
				border-style: solid;
				border-width: 0 10px 10px;
				border-color: #1a1a1a transparent;
				display: block;
				width: 0;
				z-index: -1000;
				top: -10px;
				left: 25px;
			}
 
 
 
 
			.bulle:hover span{
				/*visibility: visible;*/
				transform:scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);
				cursor: help;
			}
			.bulle:hover{
				cursor: help;
			}
		</style>
	</head>
	<body>
		<div class="divContent" id="divContent">Az AZ azer AZERTY souligné souligne é</div>
 
		<input type"text" id="txtbox_crit" value="é"> <a href="javascript:srl()" title="identifier la chaine">identifier la chaine</a>
		<hr>
		<div id="resultatsTest">attente</div>
 
		<script type="text/javascript">
			function srl(){
				var _content=document.getElementById('divContent');
				var _text=_content.innerHTML;
				var _crit=document.getElementById('txtbox_crit').value;
 
				var _divReslutat = document.getElementById("resultatsTest");
				_divReslutat.innerHTML = "longueur totale du texte de référence : "+_text.length+"</br>";
 
 
				var Rgx_crit = new RegExp("\\b"+_crit+"\\b","gi");
 
				_divReslutat.innerHTML += "chaine recherchée : <b>"+_crit+"</b></br>";
				_divReslutat.innerHTML += "longueur : "+_crit.length+"</br></br>";
				if(Rgx_crit.test(_text)){
					_divReslutat.innerHTML += "1a. nombre d'occurences : "+_text.match(Rgx_crit).length+"<hr>";
				}
				else{
					_divReslutat.innerHTML +="1b. pas de correspondance<hr>";
				}
 
				var addLexique=_text;
				while((find_crit = Rgx_crit.exec(_text))!=null){
					var t = _text.substr(find_crit.index, _crit.length);
					_divReslutat.innerHTML +=("résultat trouvé position " + find_crit.index+" : "+t+"<br>");
					addLexique= addLexique.replace(t,"<span class='bulle'>"+t+"<span>souris</span></span>");
 
				}	
				_divReslutat.innerHTML+="nouveau texte : "+addLexique+"<hr>";
			}
 
			window.onload=srl;
		</script>
	</body>
</html>