Sélection de texte, numérotation, retour chariot

Version imprimable

Bonjour,

J'affiche du code dans une page HTML et je souhaite pouvoir mettre un lien pour le sélectionner.
Voic mes soucis :
- Comment faire pour ne pas sélectionner les numéros de lignes ?
- Quand je sélectionne des lignes et les affiches avec alert, je n'ai pas les retour chariot.

Voici mon code

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
 
  <title>test</title>
  </head>
  <body>
 
<script type="text/javascript" language="JavaScript">
function selectionner(objet) {
                                                        
  if ( window.getSelection ) {
    alert(window.getSelection());
  }
  else if (document.getSelection) {
    alert(document.getSelection());
  }
  else if (document.selection) {
    alert(document.selection.createRange().text);
  }
    
    return true;
}
</script>
 
<a href="#" onclick="selectionner(this);">s&eacute;lectionnez</a>
  <pre>
<code id="contenuCoded0e132" class="contenuCode"><span class="numerotation_code">1.</span><code class="python_comment1">#</code><code class="python_comment1"> </code><code class="python_comment1">-*-</code><code class="python_comment1"> </code><code class="python_comment1">coding=utf-8</code><code class="python_comment1"> </code><code class="python_comment1">-*-</code><code class="python_comment1"> </code>
<span class="numerotation_code">2.</span><code class="python_comment1">#</code><code class="python_comment1"> </code><code class="python_comment1">changements</code><code class="python_comment1"> </code><code class="python_comment1">de</code><code class="python_comment1"> </code><code class="python_comment1">type</code><code class="python_comment1"> </code>
<span class="numerotation_code">3.</span><code class="python_comment1">#</code><code class="python_comment1"> </code><code class="python_comment1">int</code><code class="python_comment1"> </code><code class="python_comment1">--&gt;</code><code class="python_comment1"> </code><code class="python_comment1">str,</code><code class="python_comment1"> </code><code class="python_comment1">float,</code><code class="python_comment1"> </code><code class="python_comment1">bool</code><code class="python_comment1"> </code>
<span class="numerotation_code">4.</span>x<code class="python_operator">=</code><code class="python_digit">4</code> 
<span class="numerotation_code">5.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x) 
<span class="numerotation_code">6.</span>x<code class="python_operator">=</code><code class="python_keyword2">str</code>(<code class="python_digit">4</code>) 
<span class="numerotation_code">7.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x)   nbjh hf jjdj hf jf jfv jfv jdfv jfjdhfv jfvj fdjfhv jf vfd jfvdf f jdfdjf jzdfhdf jdfvjdfvdjfv jdfv jzdfv jzfv jfv 
<span class="numerotation_code">8.</span>x<code class="python_operator">=</code><code class="python_keyword2">float</code>(<code class="python_digit">4</code>) 
<span class="numerotation_code">9.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x) 
<span class="numerotation_code">10.</span>x<code class="python_operator">=</code><code class="python_keyword2">bool</code>(<code class="python_digit">4</code>) 
<span class="numerotation_code">22211.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x) 
</code>
</pre>     
 
  </body>
</html>

:merci: pour vos aides !

Bonsoir,
la supression peut se faire avec l'expression régulière /^\d+(.)/mg

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function selectionner(objet) {
  if ( window.getSelection ) {
    sTexte = window.getSelection();
  }
  else if (document.getSelection) {
    sTexte = document.getSelection();
  }
  else if (document.selection) {
    sTexte = document.selection.createRange().text;
  }
  if( sTexte){
    // conversion pour les getSelection
    if( sTexte.getRangeAt){
      sTexte = sTexte.getRangeAt(0);
    }
    // application de la regExp
    sTexte = sTexte.toString().replace( /^\d+(.)/mg,'');
  }
  alert( sTexte);
  return true;
}

il existe aussi la solution de modifier la structure du document, un peu dans le style du forum, les numéros de ligne et le texte étant séparé.

08/04/2012, 09h55
djibril

Citation:

Envoyé par NoSmoking

il existe aussi la solution de modifier la structure du document, un peu dans le style du forum, les numéros de ligne et le texte étant séparé.

L'inconvénient de cette méthode est que l'on est obligé d'utiliser des tableaux imbriqués. Et apparemment, cela pose des soucis de décalage an fonction des navigateurs et systèmes d'exploitation.

Je vais tester ta solution, merci !
08/04/2012, 10h13
Willpower

Citation:

Envoyé par djibril

L'inconvénient de cette méthode est que l'on est obligé d'utiliser des tableaux imbriqués. Et apparemment, cela pose des soucis de décalage an fonction des navigateurs et systèmes d'exploitation.

Je vais tester ta solution, merci !

Je ne pense pas que les systèmes d'exploitation influent directement sur le rendu d'un navigateur. Et pour les décalages différents, ils sont souvent due aux "margin" et "padding" de tes éléments.

Bien souvent un

Code:

*{padding:0;margin:0;}

en début de ton fichier css résout tous ces problèmes.
08/04/2012, 10h20
djibril

Je te dit ça car j'ai récemment eu des remontées sur l'affichage des codes numérotés dans les articles de développez.com et c'était très très étrange. Des décalages d'une à 5 lignes des fois. Chez moi ça fonctionnait sous FF11 et chez un autre non alors qu'il était sur le même navigateur mais sous un autre OS. Idem avec d'autres navigateurs.

Qu'elle est l'explication de ce code *{padding:0;margin:0;} ?

:merci:
08/04/2012, 14h21
Willpower

Citation:

Envoyé par djibril

Qu'elle est l'explication de ce code *{padding:0;margin:0;} ?

La plupart des éléments du DOM (div, table, a, span, td) on du style défini par défaut (qui peut varier d'un navigateur à l'autre) et en général, les padding et margin (marges internes et externes) sont la cause des différences d'affichage d'un navigateur à l'autre.

Donc mettre ces valeurs à ZERO pour tous les élements du DOM est souvent une facilité que beaucoup utilisent pour ensuite réajuster les marges des éléments qui doivent en avoir pour le site en question.

edit: l'étoile (*) signifie pour tous les éléments (div, span, table, etc...). (c'est du CSS)

Merci pour ton explication.

J'ai trouvé une solution pour montrer/cacher les numéros de ligne, mais j'ai un autre souci.

Ma balise html est la suivante : <a href="#" onclick="return cacher_numero(this, 'd0e1082');">Cachez les numéros</a>
Je souhaite que dans mon javascript, dans la fonction cacher_numero, avoir la possibilité de modifier le onclick de ma balise a et sa valeur afin de la transformer en <a href="#" onclick="return montrer_numero(this, 'd0e1082');">Montrez les numéros</a>Je ne trouve pas de solution. Voici mon javascript, mes les alerte donne undef
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function cacher_numero(obj, objName) { var arr = new Array(); arr = document.getElementsByName(objName); for ( var i = 0; i < arr.length; i++) { var obj = document.getElementsByName(objName).item(i); obj.style.visibility = 'hidden'; } alert(obj.innerText); alert(obj.href); obj.innerText='Test'; //document.getElementById('id').onclick = doSomething; return true; }
:merci:

08/04/2012, 20h56
Willpower

Déjà à première vue tu as deux déclarations d'une variable du même nom "obj" dans ta fonction, la première en tant qu'argument et la seconde dans ta boucle for avec le mot clé "var". (je n'ai pas lu ton code, mais le problème vient probablement de là, donc renomme l'une des deux autrement, si ça ne va toujours pas, dis-le et je relirai ton code plus attentivement.)

;)

Merci pour ton expertise. Mes fonctionnalités ne fonctionnent toujours pas.
Je souhaite aussi pouvoir sélectionner au clic sur le lien selectionner. Clic => texte sélectionné, mais ça ne fonctionne pas aussi.

Voici mon code complet :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
 
  <title>test javascript et code</title>
  </head>
  <body>
 
<script type="text/javascript" language="JavaScript">
  function selectionner(objeta, id) {
    document.getElementById(id).select();
 
    return true;
 
    var sTexte;
 
    if ( window.getSelection ) {
      sTexte = window.getSelection();
    }
    else if (document.getSelection) {
      sTexte = document.getSelection();
    }
    else if (document.selection) {
      sTexte = document.selection.createRange().text;
    }
 
    if( sTexte){
      // conversion pour les getSelection
      if( sTexte.getRangeAt){
        sTexte = sTexte.getRangeAt(0);
      }
      // application de la regExp
      sTexte = sTexte.toString().replace( /^\d+\./mg,'');
    }
 
 
    return true;
  }
 
  function cacher_numero(objeta, objName) {        
    var arr = new Array();
    arr     = document.getElementsByName(objName);
    for ( var i = 0; i < arr.length; i++) { 
      var obj = document.getElementsByName(objName).item(i); 
      obj.style.visibility = 'hidden'; 
    }
 
    alert(objeta.innerText);    
    alert(objeta.value);
    objeta.innerText='Montrez les num&eacute;ros'; 
    //objeta.onclick = montrer_numero(objeta, objName);
 
    return true;
  }
  function montrer_numero(objeta, objName) {        
    var arr = new Array(); 
    arr     = document.getElementsByName(objName);
    for ( var i = 0; i < arr.length; i++) { 
      var obj = document.getElementsByName(objName).item(i); 
      obj.style.visibility = 'visible'; 
    }
 
    alert(objeta.innerText);    
    alert(objeta.value);
    objeta.innerText='Cachez les num&eacute;ros'; 
    //objeta.onclick = cacher_numero(objeta, objName);
    return true;
  }
 
</script>
 
<div class="contenu_code">
 
<a href="#" onclick="return selectionner(this, 'contenuCoded0e1082');">selectionner</a>&nbsp;
<a href="#" onclick="return cacher_numero(this, 'd0e1082');">Cachez les num&eacute;ros</a>&nbsp;
<a href="#" onclick="return montrer_numero(this, 'd0e1082');">Montrez les num&eacute;ros</a>&nbsp;
 
<pre><code class="contenuCode" id="contenuCoded0e1082"><span class="numerotation_code" name="d0e1082">1.</span><code class="comment1">#</code><code class="comment1">!/usr/bin/perl</code> 
<span class="numerotation_code" name="d0e1082">2.</span><code class="keyword1">use</code> strict; 
<span class="numerotation_code" name="d0e1082">3.</span>  <code class="keyword1">use</code> warnings; 
<span class="numerotation_code" name="d0e1082">4.</span> 
<span class="numerotation_code" name="d0e1082">5.</span>     <code class="comment1">#</code><code class="comment1"> </code><code class="comment1">Voici</code><code class="comment1"> </code><code class="comment1">une</code><code class="comment1"> </code><code class="comment1">ligne</code><code class="comment1"> </code><code class="comment1">de</code><code class="comment1"> </code><code class="comment1">commentaire.</code> 
<span class="numerotation_code" name="d0e1082">6.</span>     <code class="keyword3">print</code> <code class="literal1">"</code><code class="literal1">Bonjour\n</code><code class="literal1">"</code>; <code class="comment1">#</code><code class="comment1"> </code><code class="comment1">Affichage</code><code class="comment1"> </code><code class="comment1">du</code><code class="comment1"> </code><code class="comment1">mot</code><code class="comment1"> </code><code class="comment1">bonjour</code><code class="comment1"> </code><code class="comment1">(autre</code><code class="comment1"> </code><code class="comment1">commentaire).</code> 
</code></pre>
</div>
 
<a href="#" onclick="return selectionner(this, 'contenuCoded0e132');">selectionner</a>&nbsp;
&nbsp;<a href="#code-contenuCoded0e132" onclick="cacher_numero(this, 'contenuCoded0e132');">Cacher numero</a>
&nbsp;<a href="#code-contenuCoded0e132" onclick="montrer_numero(this, 'contenuCoded0e132');">Montrer numero</a>
 
<pre>
<code id="contenuCoded0e132" class="contenuCode"><span name="contenuCoded0e132" class="numerotation_code">1.</span><code class="python_comment1">#</code><code class="python_comment1"> </code><code class="python_comment1">-*-</code><code class="python_comment1"> </code><code class="python_comment1">coding=utf-8</code><code class="python_comment1"> </code><code class="python_comment1">-*-</code><code class="python_comment1"> </code>
<span name="contenuCoded0e132" class="numerotation_code">2.</span><code class="python_comment1">#</code><code class="python_comment1"> </code><code class="python_comment1">changements</code><code class="python_comment1"> </code><code class="python_comment1">de</code><code class="python_comment1"> </code><code class="python_comment1">type</code><code class="python_comment1"> </code>
<span name="contenuCoded0e132" class="numerotation_code">3.</span><code class="python_comment1">#</code><code class="python_comment1"> </code><code class="python_comment1">int</code><code class="python_comment1"> </code><code class="python_comment1">--&gt;</code><code class="python_comment1"> </code><code class="python_comment1">str,</code><code class="python_comment1"> </code><code class="python_comment1">float,</code><code class="python_comment1"> </code><code class="python_comment1">bool</code><code class="python_comment1"> </code>
<span name="contenuCoded0e132" class="numerotation_code">4.</span>x<code class="python_operator">=</code><code class="python_digit">4</code> 
<span name="contenuCoded0e132" class="numerotation_code">5.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x) 
<span name="contenuCoded0e132" class="numerotation_code">6.</span>x<code class="python_operator">=</code><code class="python_keyword2">str</code>(<code class="python_digit">4</code>) 
<span name="contenuCoded0e132" class="numerotation_code">7.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x)   nbjh hf jjdj hf jf jfv jfv jdfv jfjdhfv jfvj fdjfhv jf vfd jfvdf f jdfdjf jzdfhdf jdfvjdfvdjfv jdfv jzdfv jzfv jfv 
<span name="contenuCoded0e132" class="numerotation_code">8.</span>x<code class="python_operator">=</code><code class="python_keyword2">float</code>(<code class="python_digit">4</code>) 
<span name="contenuCoded0e132" class="numerotation_code">9.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x) 
<span name="contenuCoded0e132" class="numerotation_code">10.</span>x<code class="python_operator">=</code><code class="python_keyword2">bool</code>(<code class="python_digit">4</code>) 
<span name="contenuCoded0e132" class="numerotation_code">22211.</span><code class="python_keyword1">print</code> x, <code class="python_keyword2">type</code>(x) 
</code>
</pre>     
 
  </body>
</html>

:merci:

09/04/2012, 15h20
djibril

Bon, j'ai changé complétement de stratégie en utilisant ol et li pour l'affichage des codes et ça fonctionne bien.
Par contre, pour faire un lien permettant de sélectionner, je n'ai point trouvé.

Citation:

Par contre, pour faire un lien permettant de sélectionner, je n'ai point trouvé.

cette petite fonction peut t'intéresser

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function selectionCode( id_source){
  var oSelect, oRange, oSrc = document.getElementById( id_source);
  if( window.getSelection) {
    oSelect = window.getSelection();
    oSelect.removeAllRanges();
    oRange = document.createRange();
    oRange.selectNodeContents( oSrc);
    oSelect.addRange( oRange);
  }
  else {
    oRange = document.body.createTextRange();
    oRange.moveToElementText( oSrc);
    oRange.select();
  }
  return false;
}

09/04/2012, 20h54
djibril

Pas mal, ça à l'air d'être bon.

: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
<!DOCTYPE HTML>
<html>  
  <head>  
    <meta charset="UTF-8">
<script type="text/javascript">
function selectionCode( id_source){
  var oSelect, oRange, oSrc = document.getElementById( id_source);
  if( window.getSelection) {
    oSelect = window.getSelection();
    oSelect.removeAllRanges();
    oRange = document.createRange();
    oRange.selectNodeContents( oSrc);
    oSelect.addRange( oRange);
  }
  else {
    oRange = document.body.createTextRange();
    oRange.moveToElementText( oSrc);
    oRange.select();
  }
  return false;
}
</script>  
    <title>test javascript et code
    </title>  
  </head>  
  <body>  
    <a href='#' onclick="selectionCode('olist');">sélectionner</a>
    <ol id="olist">
      <li class="python_comment1">
<pre><code class="python_operator">=</code><code class="python_digit">4</code> </pre>
      </li>
      <li class="python_comment1">
<pre><code class="python_operator">=</code><code class="python_digit">4</code>    test   test</pre>
      </li>
    </ol>
  </body>
</html>