Jak określić pozycje "nowych linii" w tekście elementu HTML?

Question

Dodanie długiego tekstu wewnątrz elementu HTML, takiego jak DIV, powoduje zawijanie tego tekstu. Dokładnie tak jak ten tekst z pytaniem. Jak mogę pobrać tekst z takiego elementu HTML i ustalić, gdzie się on podzala? tj. w przypadku wstawienia nowej linii.

Na przykład w tym polu znajduje się nowa linia po "... jak to", jedna po "... gdzie to" i dwie po "... jest wstawiona".

Answer 1

Więc problem jest rzeczywiście jak zrobić Zawijanie wierszy w HTML5 canvas:

To wszystko jest do konwersji niektórych standardowych elementów HTML, które posiadają tekst i/lub zdjęcie do płótna HTML5. I niestety, metoda '.fillText()' nie jest wystarczająco inteligentna, aby rozbić fragment tekstu na mnie, więc muszę "ręcznie" wykryć każdą linię.

Co można zrobić, to measureText, dodając kolejno jedno słowo na raz. Zmierz pierwsze słowo i jeśli pasuje do szerokości pojemnika (ctx2d.measureText(words).width <= containerWidth), możesz dodać kolejne słowo i zmierzyć ponownie. Dopóki ciąg słów nie pasuje. Jeśli nie, musisz fillText w następnym wierszu.

chodzi o wstawiony końca wiersza są szczegółowo przedstawione w HTML, albo \n lub \r znaków pola tekstowe lub elementów HTML, jak <br \>. Dlatego przed pomiarem tekstu możesz podzielić go akapitami.

W pola tekstowe:

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

W elementami nie tworzą:

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

Nie jestem pewien, co próbujesz osiągnąć. Ale tutaj jest prosta sztuczka, której możesz użyć do określenia pozycji pojedynczych słów. Zobacz ten 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);