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

**djibril** · 07/04/2012, 20h06

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

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

pour vos aides !

**NoSmoking** · 08/04/2012, 00h58

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

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

**djibril** · 08/04/2012, 09h55

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 !

**Willpower** · 08/04/2012, 10h13

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

Sélectionner tout - Visualiser dans une fenêtre à part

*{padding:0;margin:0;}

en début de ton fichier css résout tous ces problèmes.

**djibril** · 08/04/2012, 10h20

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;} ?

**Willpower** · 08/04/2012, 14h21

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)

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager