Variable utilisateur et accents

Version imprimable

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 :P
d'avance merci

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

Hello,

Oui c'est une calamité les caractères accentués avec les regex. Rien de natif pour gérer ça facilement à ma connaissance, il faut passer par des tables de mappage pour remplacer les accents par leurs équivalents non accentués.
Exemple :

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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
*/
    var defaultDiacriticsRemovalMap = [
        {'base':'A', 'letters':'\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F'},
        {'base':'AA','letters':'\uA732'},
        {'base':'AE','letters':'\u00C6\u01FC\u01E2'},
        {'base':'AO','letters':'\uA734'},
        {'base':'AU','letters':'\uA736'},
        {'base':'AV','letters':'\uA738\uA73A'},
        {'base':'AY','letters':'\uA73C'},
        {'base':'B', 'letters':'\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181'},
        {'base':'C', 'letters':'\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E'},
        {'base':'D', 'letters':'\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779'},
        {'base':'DZ','letters':'\u01F1\u01C4'},
        {'base':'Dz','letters':'\u01F2\u01C5'},
        {'base':'E', 'letters':'\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E'},
        {'base':'F', 'letters':'\u0046\u24BB\uFF26\u1E1E\u0191\uA77B'},
        {'base':'G', 'letters':'\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E'},
        {'base':'H', 'letters':'\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D'},
        {'base':'I', 'letters':'\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197'},
        {'base':'J', 'letters':'\u004A\u24BF\uFF2A\u0134\u0248'},
        {'base':'K', 'letters':'\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2'},
        {'base':'L', 'letters':'\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780'},
        {'base':'LJ','letters':'\u01C7'},
        {'base':'Lj','letters':'\u01C8'},
        {'base':'M', 'letters':'\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C'},
        {'base':'N', 'letters':'\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4'},
        {'base':'NJ','letters':'\u01CA'},
        {'base':'Nj','letters':'\u01CB'},
        {'base':'O', 'letters':'\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C'},
        {'base':'OI','letters':'\u01A2'},
        {'base':'OO','letters':'\uA74E'},
        {'base':'OU','letters':'\u0222'},
        {'base':'OE','letters':'\u008C\u0152'},
        {'base':'oe','letters':'\u009C\u0153'},
        {'base':'P', 'letters':'\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754'},
        {'base':'Q', 'letters':'\u0051\u24C6\uFF31\uA756\uA758\u024A'},
        {'base':'R', 'letters':'\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782'},
        {'base':'S', 'letters':'\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784'},
        {'base':'T', 'letters':'\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786'},
        {'base':'TZ','letters':'\uA728'},
        {'base':'U', 'letters':'\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244'},
        {'base':'V', 'letters':'\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245'},
        {'base':'VY','letters':'\uA760'},
        {'base':'W', 'letters':'\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72'},
        {'base':'X', 'letters':'\u0058\u24CD\uFF38\u1E8A\u1E8C'},
        {'base':'Y', 'letters':'\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE'},
        {'base':'Z', 'letters':'\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762'},
        {'base':'a', 'letters':'\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250'},
        {'base':'aa','letters':'\uA733'},
        {'base':'ae','letters':'\u00E6\u01FD\u01E3'},
        {'base':'ao','letters':'\uA735'},
        {'base':'au','letters':'\uA737'},
        {'base':'av','letters':'\uA739\uA73B'},
        {'base':'ay','letters':'\uA73D'},
        {'base':'b', 'letters':'\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253'},
        {'base':'c', 'letters':'\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184'},
        {'base':'d', 'letters':'\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A'},
        {'base':'dz','letters':'\u01F3\u01C6'},
        {'base':'e', 'letters':'\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD'},
        {'base':'f', 'letters':'\u0066\u24D5\uFF46\u1E1F\u0192\uA77C'},
        {'base':'g', 'letters':'\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F'},
        {'base':'h', 'letters':'\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265'},
        {'base':'hv','letters':'\u0195'},
        {'base':'i', 'letters':'\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131'},
        {'base':'j', 'letters':'\u006A\u24D9\uFF4A\u0135\u01F0\u0249'},
        {'base':'k', 'letters':'\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3'},
        {'base':'l','letters':'\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747'},
        {'base':'lj','letters':'\u01C9'},
        {'base':'m','letters':'\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F'},
        {'base':'n','letters':'\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5'},
        {'base':'nj','letters':'\u01CC'},
        {'base':'o','letters':'\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275'},
        {'base':'oi','letters':'\u01A3'},
        {'base':'ou','letters':'\u0223'},
        {'base':'oo','letters':'\uA74F'},
        {'base':'p','letters':'\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755'},
        {'base':'q','letters':'\u0071\u24E0\uFF51\u024B\uA757\uA759'},
        {'base':'r','letters':'\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783'},
        {'base':'s','letters':'\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B'},
        {'base':'t','letters':'\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787'},
        {'base':'tz','letters':'\uA729'},
        {'base':'u','letters':'\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289'},
        {'base':'v','letters':'\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C'},
        {'base':'vy','letters':'\uA761'},
        {'base':'w','letters':'\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73'},
        {'base':'x','letters':'\u0078\u24E7\uFF58\u1E8B\u1E8D'},
        {'base':'y','letters':'\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF'},
        {'base':'z','letters':'\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763'}
    ];

    var diacriticsMap ={};
    for(var i=0; i < defaultDiacriticsRemovalMap .length; i++){
        var letters = defaultDiacriticsRemovalMap [i].letters;
        for(var j=0; j < letters.length ; j++){
            diacriticsMap[letters[j]]= defaultDiacriticsRemovalMap [i].base;
        }
    }

    // "what?" version ... http://jsperf.com/diacritics/12
    function removeDiacritics (str){
        return str.replace(/[^\u0000-\u007E]/g,function(a){ 
           return diacriticsMap[a]|| a; 
        });
    }    
    var paragraph ="L'avantage d'utiliser le lorem ipsum est bien     évidemment de pouvoir créer des maquettes ou de remplir un site internet de contenus qui présentent un rendu s'approchant un maximum du rendu final. \n Par défaut lorem ipsum ne contient pas d'accent ni de caractères spéciaux contrairement à la langue française qui en contient beaucoup. C'est sur ce critère que nous proposons une solution avec cet outil qui générant du faux-texte lorem ipsum mais avec en plus, des caractères spéciaux tel que les accents ou certains symboles utiles pour la langue française. \n L'utilisation du lorem standard est facile d’utilisation mais lorsque le futur client utilisera votre logiciel il se peut que certains caractères spéciaux ou qu'un accent ne soient pas codés correctement. \n Cette page a pour but donc de pouvoir perdre le moins de temps possible et donc de tester directement si tous les encodages de base de donnée ou des sites sont les bons de plus il permet de récuperer un code css avec le texte formaté !";
    alert(removeDiacritics(paragraph));

tiré de : http://stackoverflow.com/questions/9...-in-javascript

24/02/2016, 09h57
PiNkjeLLy

:merci: pour l'info Sylvain, je teste ça
j'espérais ne pas devoir passer par là mais visiblement pas le choix

1 pièce(s) jointe(s)

bonjour !
bon finalement après plusieurs (beaucoup) approches, je reviens vers javascript et je pense enfin avoir trouvé la solution ! :yaisse:

pour que mon utilisateur final en fasse le moins possible (c'était surtout ça mon casse tête), j'ai décidé de lui imposer une syntaxe particulière, de manière à ce que lui même dise sur quel mot ou expression il souhaite afficher x définition.
donc il devra écrire [definition]son mot ou expression[x][/definition]
ou [x] sera l'id de la définition dans la db

et coté javascript, un petit truc comme ça :

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
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</title>
		<style>
			.bulle{
				background-color: #bfbfbf; /*gris 25%*/ 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 onload="findDef()">
		<script type="text/javascript">
			function findDef(){
				var text = document.getElementById('div_findDef').innerHTML;
				var regCrit = new RegExp(/(\[definition\])(\w.+|\W.+|\d.+)(\[\d+\])(\[\/definition\])/gi);
 
				if(text.match(regCrit)){
					var listMatch = text.match(regCrit);
					document.getElementById("resultat_findDef").innerHTML += "nombre d'éléments trouvés : "+listMatch.length+"</br></br>";
					for (var i =0; i<listMatch.length; i++){
						document.getElementById("resultat_findDef").innerHTML += "index"+i+" : "+listMatch[i]+"</br></br>";
 
						var full = listMatch[i];
 
						var fullExpress = listMatch[i].substring(12,(listMatch[i]).length-13);
						document.getElementById("resultat_findDef").innerHTML += "- fullExpress : "+fullExpress+"</br></br>";
 
						var wordExpress = fullExpress.substring(fullExpress,fullExpress.lastIndexOf("\["));
						document.getElementById("resultat_findDef").innerHTML += "-> wordExpress : "+wordExpress+"</br></br>";
 
						var idExpress = fullExpress.substring(fullExpress.lastIndexOf("\[")+1,fullExpress.lastIndexOf("\]"));
						document.getElementById("resultat_findDef").innerHTML += "-> idExpress : "+idExpress+"</br></br>";
 
 
						text = text.replace(full,"<span class='bulle'>"+wordExpress+"<span>ajouter définition n°"+idExpress+"</span></span> ");
						text = text.replace(/\\"/g, '"');
						document.getElementById("div_findDef").innerHTML = text;
 
					document.getElementById("resultat_findDef").innerHTML += "<hr>";
					}
				}
				else{alert("aucun résultat trouvé");}
			}
		</script>
 
		<div id="div_findDef" style="background-color: #e6e6e6">
			<p>texte exemple [definition]mot ou expression[1][/definition] suivi d'autre texte</p>
			<p>texte exemple [definition]avec accents éèà[2][/definition] suivi d'autre texte</p>
			<p> avec accents [definition]équivalent 3[3][/definition]</p>
			<p>puis chiffres [definition]4 éèà azert4[4][/definition]</p>
		</div>
 
		<p id="resultat_findDef"></br></p>
	</body>
</html>

et comme par magie ça donne ce résultat joint
Pièce jointe 202410

voila, j'espère que je vais enfin terminer ce *** lexique

c'est encore moi !
en travaillant un tout petit peu plus, j'ai LE regex qu'il me fallait, et en plus la fonction ne fait plus que qqes lignes !
grace aux groupes capturants, je ne récupère que les infos dont j'ai besoin

j'avoue, je me suis aidée de ce site https://regex101.com/#javascript pour tester mes expressions et afficher les résultats

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
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
<!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</title>
		<style>
			.bulle{
				background-color: #bfbfbf; /*gris 25%*/ 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 onload="findDef()">
		<script type="text/javascript">
			function findDef(){
				var text = document.getElementById('div_findDef').innerHTML;
				var regCrit = new RegExp(/\[definition\](\w.+|\d.+|\W.+)\[(\d+)\]\[\/definition\]/gi);
				while((listMatch = regCrit.exec(text)) != null){
 
					document.getElementById("resultat_findDef").innerHTML += listMatch[0]+"</br>";
					document.getElementById("resultat_findDef").innerHTML += listMatch[1]+"</br>";
					document.getElementById("resultat_findDef").innerHTML += listMatch[2]+"</br>";
 
					text = text.replace(listMatch[0],"<span class='bulle'>"+listMatch[1]+"<span>ajouter définition n° "+listMatch[2]+"</span></span>");
					document.getElementById("div_findDef").innerHTML = text;
					document.getElementById("resultat_findDef").innerHTML += "<hr>";
 
				}
			}
		</script>
 
		<div id="div_findDef" style="background-color: #e6e6e6">
			<p>texte exemple [definition]mot ou expression[1234][/definition] suivi d'autre texte</p>
			<p>texte exemple [definition]avec accents éèà[2][/definition] suivi d'autre texte</p>
			<p> avec accents [definition]équivalent 3[3][/definition]</p>
			<p>puis chiffres [definition]4 éèà azert4[4][/definition]</p>
		</div>
 
		<p id="resultat_findDef"></br></p>
	</body>
</html>

et la ca roule nikel
comme quoi, des fois on se retourne le cerveau pendant des jours pour ne pas voir que finalement c'etait tout ***

je crois que mon problème est résolu (jusqu'au prochain :lol:)

06/03/2016, 16h53
CosmoKnacki
Désolé de te contrarier mais ta regex est fausse.

Code:

var regCrit = new RegExp(/\[definition\](\w.+|\d.+|\W.+)\[(\d+)\]\[\/definition\]/gi);

Par exemple si deux définitions sont sur la même ligne: [definition]toto[1][/definition] blah blah [definition]tutu[2][/definition] tu n'obtiendras qu'un seul résultat avec toto[1][/definition] blah blah [definition]tutu pour le premier groupe de capture et 2 pour le second. C'est dû au fait que les quantificateurs sont gourmands par défaut. Ici .+ va prendre tous les caractères jusqu'à la fin de la ligne, puis le moteur de regex va devoir faire marche arrière et .+ va devoir "rendre" les caractères un par un, jusqu'à trouver une correspondance pour \[(\d+)\]\[\/definition\].

D'autre part la classe de caractères \d étant contenue dans \w, à quoi bon écrire \w.+|\d.+? \w.+ seul suffit. Ce qui nous laisse avec \w.+|\W.+, ce qui littéralement signifie: un caractère qui appartient à \w suivi d'un ou plusieurs autres caractères ou un caractère n'appartenant pas à \w suivi d'un ou plusieurs autres caractères.

Donc en résumé, ce premier caractère peut être absolument n'importe quoi! Donc si on fait abstraction du caractère saut de ligne, on peut très bien remplacer \w.+|\d.+|\W.+ par ..+ voire .+.

Pour résoudre le problème de gourmandise du quantificateur, tu peux le rendre non-gourmand en ajoutant un ? aprés:

Code:

/\[definition\](.+?)\[(\d+)\]\[\/definition\]/gi

Comme ça, au lieu de prendre tous les caractères de la ligne pour ensuite faire marche arrière, il prendra les caractères un par un jusqu'à ce que la suite de la pattern réussisse. C'est déjà plus pratique mais ça oblige le moteur de regex de tester la suite de la pattern pour chaque caractère que le quantificateur va prendre. Une meilleur solution consiste à remplacer le point par une classe de caractère excluant le crochet ouvrant [^[], puis d'utiliser un quantificateur gourmand: [^[]+, ce qui fait que cette fois-ci le quantificateur ne mènera pas jusqu'au bout de la ligne mais directement jusqu'au prochain crochet ouvrant sans devoir faire de tests inutiles.

À noter:
- le crochet fermant n'est pas un caractère spécial, il est inutile de l'échapper.
- Même si désormais il est possible d'utiliser la notation littérale dans le constructeur: var regObj = new RegExp(/notation_littérale/), ça ne sert pas à grand chose, autant écrire directement: var regObj = /notation_littérale/ qui revient au même.
Donc:

Code:

var regCrit = /\[definition]([^[]+)\[(\d+)]\[\/definition]/gi;
09/03/2016, 09h01
PiNkjeLLy

effectivement CosmoKnacki, je n'avais pas géré ce problème :merci: