Wie kann ich die Positionen von "neuen Zeilen" im Text eines HTML-Elements bestimmen?

Question

Wenn Sie langen Text in ein HTML-Element wie z. B. ein DIV einfügen, wird das Textelement vom Wrapper umschlossen. Genau wie dieser Fragetext, eigentlich. Wie kann ich den Text von einem solchen HTML-Element nehmen und feststellen, wo es bricht? d.h. wo eine neue Zeile eingefügt wird.

Zum Beispiel gibt es in diesem Feld eine neue Zeile nach "... so", eine nach "... wo es ist" und zwei nach "... wird eingefügt."

Answer 1

Also, das Problem tatsächlich ist, wie Zeilenumbruch in HTML5-Canvas zu tun:

Das ist alles für die Umwandlung einige Standard-HTML-Elemente, die Text halten und/oder ein Foto in eine HTML5-Leinwand. Und leider ist die '.fillText()' Methode nicht schlau genug, um ein Stück Text für mich zu brechen, so muss ich "manuell" jede Zeile erkennen.

Was Sie tun könnten, ist measureText nacheinander Wort hinzufügen. Messen Sie das erste Wort, und wenn es zur Breite Ihres Containers passt (ctx2d.measureText(words).width <= containerWidth), dann können Sie ein anderes Wort hinzufügen und erneut messen. Bis die Wortkette nicht passt. Wenn nicht - müssen Sie fillText in der nächsten Zeile.

Wie bei den manuell eingeführten Zeilenumbrüchen, werden sie in HTML, entweder durch \n oder \r Zeichen in Textbereichen oder durch HTML-Elemente, wie <br \> spezifisch dargestellt. Bevor Sie den Text messen, sollten Sie ihn daher nach Absätzen aufteilen.

In Textbereiche:

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

In nicht-Formelemente:

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

Ich bin mir nicht sicher, was Sie erreichen möchten. Aber hier ist ein einfacher Trick, mit dem Sie die Positionen einzelner Wörter identifizieren können. Sehen Sie diese 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);