[DOM] Split d'un innerHTML multilignes

Bonjour à tous,

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

Code:

---

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:

---

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 !

salut
remplace ton expression régulière par

Code:

---

/\s/

---

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:

---

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 ?

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:

---

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:

---

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:

---

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