Discussion :

[Amnesiak]

Bonjour à tous,

Supposons qu'une page contienne un élément dont le texte s'étale sur plusieurs lignes :

Code :

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

1
2
3
4
5
<div id="demo">
line1
line2
line3
</div>

Si je souhaite en extraire le contenu et le découper pour en séparer chaque ligne, il m'a semblé logique de faire tout simplement :

Code :

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

1
2
3
4
5
<script type="text/javascript">
var text = document.getElementById('demo').innerHTML;
var split = text.split(/\r\n|\r|\n/);
alert('Nombre de lignes:'+split.length);             
</script>

Le résultat est OK sous Firefox, Opera, Chrome et Safari. Par contre IE pose problème, dans le sens ou le split ne retourne qu'une seule ligne. Quelqu'un a-t-il une autre idée pour réaliser la découpe ?

Merci d'avance !

[bigboomshakala]

salut
remplace ton expression régulière par

Code :

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

/\s/

[Amnesiak]

Salut,

Merci pour ta réponse ! J'avais déjà essayé cette possibilité, mais j'ai oublié de préciser dans mon exemple ci-dessus que les lignes peuvent contenir des caractères d'espacement, aussi bien que d'autres caractères spéciaux... désolé

Code :

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

1
2
3
4
5
<div id="demo">
line (1) ?
line #2...
line [3] !!
</div>

J'ai donc bien peur qu'il s'agisse plutôt d'un problème d'expression régulière...
Ne pourrait-on pas ajouter à ton expression une exception pour le caractère "espace" et le "tab" ? Ca devrait faire l'affaire non ?

[Amnesiak]

Après de longues recherches, il semblerait qu'il ne s'agisse pas simplement d'un problème d'expression régulière, mais plutôt d'une particularité d'Internet Explorer dans la manière dont son parser DOM gère les espaces et les retours à la ligne.

J'ai eu beau tester diverses méthodes d'accès aux données, mais sans succès :

Code :

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

1
2
3
text = document.getElementById('demo').element.childNodes[0].data; // acces DOM
text = document.getElementById('demo').element.childNodes[0].nodeValue;
text = $('demo').get('html'); // MooTools

La seule alternative compatible multi-browsers que j'ai trouvée consiste à englober mon <div> dans un élément <pre>, de telle sorte que les espaces et retours chariot soient conservés. J'ai alors logiquement pensé reproduire cette situation dynamiquement via le DOM, mais malheureusement sans succès:

Code :

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

1
2
3
4
var demo = document.getElementById('demo');
var monPre = document.createElement('pre');
demo.parentNode.appendChild(monPre);
monPre.appendChild(demo);

Ou même simuler le comportement d'un <pre> à l'aide des CSS... en vain.

Code :

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

<div id="demo" style="white-space:pre;">

Je me trouve dès lors comme qui dirait en manque d'inspiration pour trouver une solution correcte et portable face à ce problème. Si quelqu'un a déjà eu l'occasion de se pencher là-dessus, toute idée ou retour d'expérience seront les bienvenus !

D'avance, un grand merci !