2009-07-18 10 views
11

J'ai un javascript qui manipule html en fonction de ce que l'utilisateur a sélectionné. Pour les navigateurs réels les méthodes que je utilise l'effet de levier de l'objet « Range », obtenus en tant que tel:Problème de détection de Newlines dans JavaScript Range Object

var sel = window.getSelection(); 
    var range = sel.getRangeAt(0); 
    var content = range.toString(); 

La variable de contenu contient tout le texte sélectionné, qui fonctionne très bien. Cependant, je trouve que je ne peux pas détecter les nouvelles lignes dans la chaîne résultante. Par exemple:

texte sélectionné est:

abc

def

ghi

range.toString() est évaluée à "abcdefghi".

Toute recherche sur les caractères spéciaux ne renvoie aucune instance de \ n \ f \ r ou même \ s. Si, cependant, j'écris la variable sur un contrôle éditable, les retours à la ligne sont de nouveau présents.

Est-ce que quelqu'un sait ce que je manque?

Il peut être pertinent que ces sélections et manipulations concernent des divs modifiables. Le même comportement est apparent dans Chrome, FireFox et Opera. Étonnamment, IE a besoin d'un code totalement différent de toute façon, mais il n'y a pas de problèmes, sauf que c'est juste IE.

Merci beaucoup.

+0

Qu'entendez-vous par 'range.toString() évalue à "abcdefghi"'? Qu'est-ce que vous utilisez pour examiner cette valeur? Un débogueur? alerte()? –

+0

Ecrivez-vous une valeur 'range' pour un contrôle modifiable ou' range.toString() '? – RaYell

+0

@Ben Dunlap tout ce qui précède, en utilisant des débogueurs externes, des alertes, ou des débogueurs basés sur le navigateur. Par exemple frapper dans un point d'arrêt avec Visual Studio. @RaYell - J'ai essayé d'écrire le contenu résultant de mon appel range.toString() dans un div editable, pour prouver qu'il maintenait les informations de retour à la ligne. La première réponse est clouée, le sel.toString() a les retours à la ligne, range.toString() non. Merci à tous. – Timbo

Répondre

11

Modification mon post:

Expérimenter un peu, je trouve que sel.toString() renvoie de nouvelles lignes dans divs contenteditable, tandis que range.toString() retours correctement dans les nouvelles lignes normales divs non modifiables, mais pas dans les modifiables, comme vous avez signalé.

Impossible de trouver une explication pour le comportement.

Ceci est un lien utile http://www.quirksmode.org/dom/range_intro.html

+0

Excellent, oui, sel.toString() a les nouvelles lignes. Merci beaucoup! – Timbo

+1

L'explication est simple et est présentée dans la spécification DOM Range: 'Range.toString()' inclut uniquement le contenu des nœuds de texte. '
' les éléments et les sauts de ligne impliqués par les éléments de bloc ne sont donc pas inclus. –

+1

'document.getSelection(). ToString()' ne fonctionne pas dans IE 11. il fusionne tout le texte de la nouvelle ligne en un seul. – agpt

1

J'ai trouvé au moins deux autres façons, donc vous pouvez toujours utiliser la plage pour trouver la position du caret dans Mozilla.

Une façon est d'appeler

var documentFragment = rangeObj.cloneContents(); 

qui contient un tableau de childNodes, et les sauts de ligne affichera en tant que nœud de la classe « HTMLBRElement ». L'autre façon est de s'assurer que chaque balise "br" est suivie d'un caractère de nouvelle ligne (0x0a)!

Cela ne nuira pas au contenu HTML de façon visible, mais maintenant toutes les ruptures HTML sont traduites en sauts de ligne en texte brut dès que range.toString() est appelé! J'espère que cela aidera - même si ce sujet est très ancien. (Je suis déjà un nécromancien, hehe) :)