IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Variable utilisateur et accents [RegExp]


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Femme Profil pro
    ça dépend des jours ...
    Inscrit en
    Septembre 2012
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : ça dépend des jours ...

    Informations forums :
    Inscription : Septembre 2012
    Messages : 40
    Points : 16
    Points
    16
    Par défaut Variable utilisateur et accents
    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>

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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 : 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
    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


  3. #3
    Membre à l'essai
    Femme Profil pro
    ça dépend des jours ...
    Inscrit en
    Septembre 2012
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : ça dépend des jours ...

    Informations forums :
    Inscription : Septembre 2012
    Messages : 40
    Points : 16
    Points
    16
    Par défaut
    pour l'info Sylvain, je teste ça
    j'espérais ne pas devoir passer par là mais visiblement pas le choix

  4. #4
    Membre à l'essai
    Femme Profil pro
    ça dépend des jours ...
    Inscrit en
    Septembre 2012
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : ça dépend des jours ...

    Informations forums :
    Inscription : Septembre 2012
    Messages : 40
    Points : 16
    Points
    16
    Par défaut
    bonjour !
    bon finalement après plusieurs (beaucoup) approches, je reviens vers javascript et je pense enfin avoir trouvé la solution !

    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 : 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</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
    Nom : Sans titre 1.png
Affichages : 553
Taille : 9,2 Ko

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

  5. #5
    Membre à l'essai
    Femme Profil pro
    ça dépend des jours ...
    Inscrit en
    Septembre 2012
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : ça dépend des jours ...

    Informations forums :
    Inscription : Septembre 2012
    Messages : 40
    Points : 16
    Points
    16
    Par défaut
    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 : 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
    <!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 )

  6. #6
    Expert éminent Avatar de CosmoKnacki
    Homme Profil pro
    Justicier interdimensionnel
    Inscrit en
    Mars 2009
    Messages
    2 888
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Justicier interdimensionnel

    Informations forums :
    Inscription : Mars 2009
    Messages : 2 888
    Points : 6 632
    Points
    6 632
    Par défaut
    Désolé de te contrarier mais ta regex est fausse.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    /\[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 : Sélectionner tout - Visualiser dans une fenêtre à part
    var regCrit = /\[definition]([^[]+)\[(\d+)]\[\/definition]/gi;

  7. #7
    Membre à l'essai
    Femme Profil pro
    ça dépend des jours ...
    Inscrit en
    Septembre 2012
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : ça dépend des jours ...

    Informations forums :
    Inscription : Septembre 2012
    Messages : 40
    Points : 16
    Points
    16
    Par défaut
    effectivement CosmoKnacki, je n'avais pas géré ce problème

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 03/12/2007, 23h45
  2. [xml] variable utilisateur en cours
    Par arthrax dans le forum Windows XP
    Réponses: 1
    Dernier message: 27/03/2007, 13h40
  3. Réponses: 4
    Dernier message: 23/02/2007, 09h37
  4. Réponses: 5
    Dernier message: 17/08/2006, 10h10
  5. Réponses: 2
    Dernier message: 25/04/2006, 18h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo