Làm cách nào để xác định vị trí của "dòng mới" trong văn bản của phần tử HTML?

Question

Thêm văn bản dài bên trong phần tử HTML chẳng hạn như DIV, phần tử bao bọc văn bản đó. Chính xác như văn bản câu hỏi này, thực sự. Tôi có thể lấy văn bản từ một phần tử HTML như thế nào và xác định nơi nó bị hỏng? tức là nơi một dòng mới được chèn vào. Ví dụ, trong hộp này, có một dòng mới sau "... như thế này", một sau "... vị trí của nó" và hai sau khi "... được chèn vào."

Answer 1

Vì vậy, vấn đề thực sự là thế nào để làm word-gói trong HTML5 canvas:

Đây là tất cả để chuyển đổi một số yếu tố HTML tiêu chuẩn mà tổ chức văn bản và/hoặc ảnh vào canvas HTML5. Và thật không may, phương thức '.fillText()' không đủ thông minh để phá vỡ một đoạn văn bản cho tôi, vì vậy tôi cần "dò tìm thủ công" từng dòng.

Điều bạn có thể làm là measureText sau đó thêm một từ tại một thời điểm. Đo từ đầu tiên và nếu nó phù hợp với chiều rộng của vùng chứa (ctx2d.measureText(words).width <= containerWidth), thì bạn có thể thêm một từ khác và đo lại. Cho đến khi chuỗi các từ không phù hợp. Nếu không - bạn phải fillText trên dòng tiếp theo.

Đối với các ngắt dòng được chèn theo cách thủ công, chúng được thể hiện cụ thể bằng HTML, hoặc là \n hoặc \r ký tự trong văn bản hoặc bằng các phần tử HTML, như <br \>. Vì vậy, trước khi đo văn bản bạn có thể muốn chia nó theo từng đoạn văn.

Trong textareas:

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

Trong các yếu tố phi hình thức:

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

Tôi không chắc chắn những gì bạn đang cố gắng đạt được. Nhưng đây là một mẹo đơn giản mà bạn có thể sử dụng để xác định vị trí của các từ đơn lẻ. Xem này 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);