Problema detectar nuevas líneas en la gama de objetos de JavaScript

Question

Tengo algo de JavaScript que manipula HTML basado en lo que el usuario ha seleccionado. Para los navegadores reales los métodos que estoy usando el apalancamiento del objeto "Gama", obtenidos como tal:

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

El contenido variable contiene todo el texto seleccionado, que funciona bien. Sin embargo, me estoy encontrando que no puedo detectar los saltos de línea en la cadena resultante. Por ejemplo:

El texto seleccionado es:

abc

def

ghi

range.toString () se evalúa como "abcdefghi".

Cualquier búsqueda sobre los caracteres especiales no devolvió instancia de \ n \ f \ o incluso \ r s. Sin embargo, si escribo la variable a un control editable, los avances de línea están presentes de nuevo.

¿Alguien sabe lo que me falta?

Puede ser relevante que estas selecciones y manipulaciones están en divs editables. El mismo comportamiento se observa en Chrome, Firefox y Opera. Sorprendentemente IE necesita código totalmente diferente de todos modos, pero no hay ningún problema allí, aparte de que acaba de ser IE.

Muchas gracias.

Answer 1

Edición de mi post:

Experimentar un poco, me parece que vuelve sel.toString() nuevas líneas en divs contentEditable, mientras range.toString() regresa nuevas líneas correctamente en divs no editables normales, pero no en los editables, como se ha informado.

No se pudo encontrar ninguna explicación para el comportamiento sin embargo.

Este es un enlace útil http://www.quirksmode.org/dom/range_intro. html

Answer 2

He encontrado al menos otras dos formas, por lo que aún puede utilizar la gama para encontrar la posición del cursor en Mozilla.

Una forma es llamar

var documentFragment = rangeObj.cloneContents ();

que contiene una matriz de childNodes, y saltos de línea se mostrarán como un nodo de clase "HTMLBRElement".

La otra forma es asegurarse de que todas las etiquetas "sa" es seguido por un carácter de nueva línea (0x0A)!

Esto no perjudicará el contenido HTML en cualquier forma visible, pero ahora todos los saltos de HTML se convierten a la línea de texto sin formato se rompe tan pronto como se llama range.toString ()!

Espero que esto ayude - incluso si este tema es muy antigua. (Soy un nigromante de todos modos ya, jeje):)

Answer 3

Gracias a la OP pude hacerlo utilizando window.getSelection () como se sugirió. Que necesitaba para obtener el texto hasta la posición de intercalación en una InputEvent, que me da un rango estático con el texto insertado. Así que tengo una gama pero no necesariamente gama de la selección actual.

function richToPoorText(range){
    //Caso base, está colapsado.
        console.log(range);
        var restoreRange=document.createRange(); //needed for restoring the caret pos.
        restoreRange.setStart(range[0].endContainer, range[0].endOffset);
        restoreRange.setEnd(range[0].endContainer, range[0].endOffset);
        rangeClone=document.createRange();
        rangeClone.setStart(__baseEditor,0);
        rangeClone.setEnd(range[0].endContainer, range[0].endOffset);
        var str;
        var sel=window.getSelection();
        sel.removeAllRanges();
        sel.addRange(rangeClone);   //sel does converts the br to newlines
        str=sel.toString();
        sel.removeAllRanges();
        sel.addRange(restoreRange);
        return str;

}

Gracias mucho OP. Y si alguien tiene el mismo caso de uso, se puede utilizar este snipset

Editar: __baseEditor es una variable global que apunta al principal div contenteditable del editor