fonction récursive pour remplacer du texte

Version imprimable

Bonjour,
J'ai pas mal de texte dans mes pages où j'ai par exemple 1ère année ou 1e année, 2ème année ou 2e année, etc...
Il faudrait que je passe en exposant les "ère" ou "ème" ou "e" en abrégé et utiliser la balise avec dreamweaver n'est pas pratique.

J'ai donc essayé de remplacer à la volée ces textes, où qu'ils se trouvent dans mes pages (dans une div #content), avec le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(document).ready(function(){ $("#content *").each(function(){ $(this).html($(this).html().replace(/1e/, "1e")); $(this).html($(this).html().replace(/1ère/, "1ère")); $(this).html($(this).html().replace(/2e/, "2e")); $(this).html($(this).html().replace(/2ème/, "2ème")); $(this).html($(this).html().replace(/3e/, "3e")); $(this).html($(this).html().replace(/3ème/, "3ème")); $(this).html($(this).html().replace(/4e/, "4e")); $(this).html($(this).html().replace(/4ème/, "4ème")); $(this).html($(this).html().replace(/5e/, "5e")); $(this).html($(this).html().replace(/5ème/, "5ème")); $(this).html($(this).html().replace(/6e/, "6e")); $(this).html($(this).html().replace(/6ème/, "6ème")); }); });
Cà marche mais chacun des pattern n'est remplacé qu'une seule fois. Comment avoir une fonction récursive pour chaque pattern ?
D'avance merci !

Bonsoir.

Un 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
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        div#content1 {
            margin:12px;
            border:1px solid #33CC99;
        }
        div#content2 {
            margin:12px;
            border:1px solid #0000CC;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("*", document.body).not("div, ol, ul").each(function(i, item){
 
                $("#affiche").append("item["+ i + "] = " + item + " = " + $(item).html() + "<br/>");
 
                $(item).html($(item).html().replace(/1e/, "1<sup>e</sup>"));
                $(item).html($(item).html().replace(/1ère/, "1<sup>&egrave;re</sup>"));
                $(item).html($(item).html().replace(/2e/, "2<sup>e</sup>"));
                $(item).html($(item).html().replace(/2ème/, "2<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/3e/, "3<sup>e</sup>"));
                $(item).html($(item).html().replace(/3ème/, "3<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/4e/, "4<sup>e</sup>"));
                $(item).html($(item).html().replace(/4ème/, "4<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/5e/, "5<sup>e</sup>"));
                $(item).html($(item).html().replace(/5ème/, "5<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/6e/, "6<sup>e</sup>"));
                $(item).html($(item).html().replace(/6ème/, "6<sup>&egrave;me</sup>"));
            });  
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>La 1e solution !</p>
        <p>La 6e solution !</p>
        <p>La 1e solution !</p>
        <p>La 6e solution !</p>
        <div id="content1">
            <p>La 1ère solution !</p>
            <p>La 6ème solution !</p>
            <ol>
                <p>La 3ème solution !</p>
                <p>La 4ème solution !</p>
            </ol>
            <p>La 1ère solution !</p>
            <p>La 6ème solution !</p>
            <div id="content2">
                <p>La 1ère solution !</p>
                <p>La 6ème solution !</p>
                <ul>
                    <p>La 2e solution !</p>
                    <p>La 5e solution !</p>
                </ul>
                <p>La 1ère solution !</p>
                <p>La 6ème solution !</p>
            </div>
        </div>
        <div id="affiche"></div>
    </div>
</body>
</html>

Il faut exclure de la boucle each() les éléments "conteneurs" div, ul, ol, etc. :

Code:

1
2
 
 $("*", document.body).not("div, ol, ul").each(function(i, item){

Bonjour,
Votre script fonctionne très bien en l'état, merci pour çà, je n'aurai pas trouvé cette solution !
Par contre, si j'inclus un tableau dans une liste avec aussi des liens, je ne parviens pas à les cibler. De plus si je continu la même liste sous le tableau, la boucle each ne fonctionne plus.

J'ai mis tous les éléments conteneurs ici mais si je ne met que par exemple 'table' et 'a', c'est pas mieux !

Une idée ?

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
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        div#content1 {
            margin:12px;
            border:1px solid #33CC99;
        }
        div#content2 {
            margin:12px;
            border:1px solid #0000CC;
        }
    </style>
    <script type="text/javascript" src="http://www.pgsm.fr/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("*", document.body).not("div, ol, ul, table, tr, td, a, br, span, strong").each(function(i, item){
                /* , table, tr, td, a, br, span, strong */
                $("#affiche").append("item["+ i + "] = " + item + " = " + $(item).html() + "<br/>");
 
                $(item).html($(item).html().replace(/1e/, "1<sup>e</sup>"));
                $(item).html($(item).html().replace(/1ère/, "1<sup>&egrave;re</sup>"));
                $(item).html($(item).html().replace(/2e/, "2<sup>e</sup>"));
                $(item).html($(item).html().replace(/2ème/, "2<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/3e/, "3<sup>e</sup>"));
                $(item).html($(item).html().replace(/3ème/, "3<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/4e/, "4<sup>e</sup>"));
                $(item).html($(item).html().replace(/4ème/, "4<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/5e/, "5<sup>e</sup>"));
                $(item).html($(item).html().replace(/5ème/, "5<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/6e/, "6<sup>e</sup>"));
                $(item).html($(item).html().replace(/6ème/, "6<sup>&egrave;me</sup>"));
            });  
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>La 1e solution !</p>
        <p>La 6e solution !</p>
        <p>La 1e solution !</p>
        <p>La 6e solution !</p>
        <div id="content1">
            <ul>
              <li>La 1ère solution !</li>
              <li>La 6ème solution !</li>
              <li>La 3ème solution !</li>
              <li>La 4ème solution !
                <ul>
                  <li>La <a href="#">1e</a> solution !</li>
                  <li>La 2e solution !
                    <table border="0" cellpadding="10" cellspacing="0">
                      <tr>
                        <td align="center" bgcolor="#CCCCCC">1e  solution</td>
                        <td align="center" bgcolor="#CCCCCC">2e  solution</td>
                      </tr>
                      <tr>
                        <td valign="top" bgcolor="#EFEFEF"><a href="#">1e solution</a></td>
                        <td valign="top" bgcolor="#EFEFEF"><a href="#">2e solution</a></td>
                      </tr>
                    </table>
                  </li>
                  <li>La <a href="#">1e</a> solution !</li>
                  <li>La 2e solution ! </li>
                </ul>
              </li>
            </ul>
            <div id="content2">
              <p>La 1ère solution !</p>
                <p>La 6ème solution !</p>
                <ul>
                    <p>La 2e solution !</p>
                    <p>La 5e solution !</p>
                </ul>
                <p>La 1ère solution !</p>
                <p>La 6ème solution !</p>
          </div>
      </div>
        <div id="affiche"></div>
    </div>
</body>
</html>

Bonsoir.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $("*", document.body).not("div, ol, ul, table, thead, tbody, tfoot, tr").each(function(i, item){ /* * debug * il ne doit pas y avoir de rupture dans l'énumération des éléments * pour cela il faut exclure les éléments "block" ou avec le style display.block * sinon le nombre d'éléments max (i) est différent du nombre d'item * un élément li qui contient d'autres éléments est un élément block */ $("#affiche").append("item["+ i + "] = " + item + " = " + $(item).html() + " "); ....
Je viens d'allumer mon cerveau :oops:, il faut croire qu'il était sur pause :aie:, ce n'est évidemment pas la bonne solution.

Les outils de développement (j'ai Dreamweaver 8 et je teste Aptana) sont tous dotés d'une fonction rechercher/remplacer très efficace ! Elle peut traiter la page en cours, mais aussi toutes les pages d'un site en une seule fois ! Bien sur il faudra plusieurs passes, une pour 1e, une pour 1ère, une pour 2e, etc. Mais c'est très rapide !

ok en effet, si j'extrais le tableau de la liste et le colle dans un élément par exemple, tout s'affiche correctement.

Encore une chose : je viens de tester un fichier réel en production et je m'aperçois encore d'une chose. Dans les attributs "title" des éléments <a href>, j'ai également une description avec pour expression "1e" ou "1ère", etc... et là, le passage en exposant ne fonctionne pas.

Du coup, comment exclure dans

Code:

$("*", document.body).not("div, ol, ul, table, thead, tbody, tfoot, tr").each(function(i, item){

, l'attribut "title" ??

Ce type d'information est-il documenté dans jquery ou faut-il compulser la doc javascript seul ?

Merci en tout cas pour vos contributions, çà me fera gagner énormément de temps en terme de relecture et corrections "inutiles de texte !!

Bien à vous.

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
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        div#content1 {
            margin:12px;
            border:1px solid #33CC99;
        }
        div#content2 {
            margin:12px;
            border:1px solid #0000CC;
        }
    </style>
    <script type="text/javascript" src="http://www.pgsm.fr/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("*", document.body).not("div, ol, ul, table, thead, tbody, tfoot, tr").each(function(i, item){
 
                /*
                * debug
                * il ne doit pas y avoir de rupture dans l'énumération des éléments
                * pour cela il faut exclure les éléments "block" ou avec le style display.block
                * sinon le nombre d'éléments max (i) est différent du nombre d'item
                * un élément li qui contient d'autres éléments est un élément block
                */
                $("#affiche").append("item["+ i + "] = " + item + " = " + $(item).html() + "<br/>");
 
 
                $(item).html($(item).html().replace(/1e/, "1<sup>e</sup>"));
                $(item).html($(item).html().replace(/1ère/, "1<sup>&egrave;re</sup>"));
                $(item).html($(item).html().replace(/2e/, "2<sup>e</sup>"));
                $(item).html($(item).html().replace(/2ème/, "2<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/3e/, "3<sup>e</sup>"));
                $(item).html($(item).html().replace(/3ème/, "3<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/4e/, "4<sup>e</sup>"));
                $(item).html($(item).html().replace(/4ème/, "4<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/5e/, "5<sup>e</sup>"));
                $(item).html($(item).html().replace(/5ème/, "5<sup>&egrave;me</sup>"));
                $(item).html($(item).html().replace(/6e/, "6<sup>e</sup>"));
                $(item).html($(item).html().replace(/6ème/, "6<sup>&egrave;me</sup>"));
            });  
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>La 1e solution !</p>
        <p>La 6e solution !</p>
        <p>La 1e solution !</p>
        <p>La 6e solution !</p>
        <table border="0" cellpadding="10" cellspacing="0">
          <tr>
            <td align="center" bgcolor="#CCCCCC">1e  solution</td>
            <td align="center" bgcolor="#CCCCCC">2e  solution</td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#EFEFEF"><p>Sans title</p>
            <p><a href="#">1e solution</a></p></td>
            <td valign="top" bgcolor="#EFEFEF"><p>Sans title</p>
            <p><a href="#">2e solution</a></p></td>
          </tr>
          <tr>
            <td valign="top" bgcolor="#EFEFEF"><p>Avec title</p>
            <p><a href="#" title="1e solution">1e solution</a></p></td>
            <td valign="top" bgcolor="#EFEFEF"><p>Avec title</p>
            <p><a href="#" title="2e solution">2e solution</a></p></td>
          </tr>
        </table>
        <p>&nbsp;</p>
        <div id="content1">
            <ul>
              <li>La 1ère solution !</li>
              <li>La 6ème solution !</li>
              <li>La 3ème solution !</li>
              <li>La 4ème solution !
                <ul>
                  <li>La <a href="#">1e</a> solution !</li>
                  <li>La 2e solution !
                    <table border="0" cellpadding="10" cellspacing="0">
                      <tr>
                        <td align="center" bgcolor="#CCCCCC">1e  solution</td>
                        <td align="center" bgcolor="#CCCCCC">2e  solution</td>
                      </tr>
                      <tr>
                        <td valign="top" bgcolor="#EFEFEF"><a href="#">1e solution</a></td>
                        <td valign="top" bgcolor="#EFEFEF"><a href="#">2e solution</a></td>
                      </tr>
                    </table>
                  </li>
                  <li>La <a href="#">1e</a> solution !</li>
                  <li>La 2e solution ! </li>
                </ul>
              </li>
            </ul>
            <div id="content2">
              <p>La 1ère solution !</p>
                <p>La 6ème solution !</p>
                <ul>
                    <p>La 2e solution !</p>
                    <p>La 5e solution !</p>
                </ul>
                <p>La 1ère solution !</p>
                <p>La 6ème solution !</p>
          </div>
      </div>
        <div id="affiche"></div>
    </div>
</body>
</html>