¿Cómo puedo determinar las posiciones de "nuevas líneas" en el texto de un elemento HTML?

Question

Al agregar texto largo dentro de un elemento HTML, como un DIV, el elemento ajusta ese texto. Exactamente como este texto de la Pregunta, en realidad. ¿Cómo puedo tomar el texto de un elemento HTML así y determinar dónde se rompe? es decir, donde se inserta una nueva línea.

Por ejemplo, en este cuadro, hay una nueva línea después de "... como este", una después de "... donde" y dos después de "... se inserta".

Answer 1

Por lo tanto, el problema es en realidad cómo hacer palabra y embalaje en HTML5 lienzo:

Todo esto es para la conversión de algunos elementos HTML estándar que sujetan el texto y/o una foto en un lienzo HTML5. Y desafortunadamente, el método '.fillText()' no es lo suficientemente inteligente como para romper una pieza de texto para , por lo que necesito "detectar" manualmente cada línea.

Lo que usted puede hacer es measureText posteriormente agregar una palabra a la vez. Mida la primera palabra, y si se ajusta al ancho de su contenedor (ctx2d.measureText(words).width <= containerWidth), puede agregar otra palabra y medir nuevamente. Hasta que la cadena de palabras no encaje. Si no es así, debe marcar fillText en la línea siguiente.

En cuanto a los saltos de línea insertados manualmente, se representan específicamente en HTML, ya sea por \n o \r caracteres en textareas o por elementos HTML, como <br \>. Por lo tanto, antes de medir el texto, es posible que desee dividirlo por párrafos.

En áreas de texto:

var paragraphs = textarea.value.split('\n'); 

En elementos no forma:

var paragraphs = []; 

// getting all <p> and elements in a typical HTML element 
// as well as individual text nodes (they are just DOM-nodes), 
// separated by <br /> elements 
var innerNodes = nonFormElement.childNodes; 

for (var i = 0, len = innerNodes.length; i += 1) { 
    // if a sub-element has some text in it, 
    // add the text to our list 
    var content = innerNodes[i].textContent; 
    if (content) { 
     paragraphs.push(content); 
    } 
} 

Answer 2

No estoy seguro de lo que está tratando de lograr. Pero aquí hay un truco simple que puede usar para identificar las posiciones de palabras sueltas. Ver este fiddle

---

var $text = $('#text'), 
    breaks = [], 
    top; 

// wrap words (\w+) and punctuation (\S+) [well, non-word and non-space] 
// in <spans> we can easily identify 
$text.html($text.text().replace(/(\w+|\S+)/g, '<span>$1</span>')); 

$text.children().each(function() { 
    var $this = $(this), 
     _top = $this.position().top; 

    if (top === undefined) { 
     top = _top; 
    } else if (top < _top) { 
     top = _top; 
     // moved a row down 
     breaks.push($this.prev()); 
     $this.prev().css('color', 'red'); 
    } 
}); 


console.log(breaks);