Sự cố phát hiện Đường kẻ mới trong đối tượng Phạm vi JavaScript

Question

Tôi có một số javascript điều khiển html dựa trên những gì người dùng đã chọn. Đối với các trình duyệt thực, các phương pháp tôi đang sử dụng tận dụng đối tượng "Phạm vi", thu được như vậy:

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

Biến nội dung chứa tất cả văn bản đã chọn, hoạt động tốt. Tuy nhiên tôi thấy rằng tôi không thể phát hiện các dòng mới trong chuỗi kết quả. Ví dụ:

văn bản được lựa chọn là:

abc

def

writing

range.toString() để đánh giá "abcdefghi".

Mọi tìm kiếm trên các ký tự đặc biệt sẽ không trả về phiên bản \ n \ f \ r hoặc thậm chí \ s. Tuy nhiên, nếu tôi ghi biến đó ra một điều khiển có thể chỉnh sửa, các nguồn cấp dữ liệu dòng sẽ xuất hiện trở lại.

Có ai biết tôi đang thiếu gì không?

Có thể có liên quan rằng các lựa chọn và thao tác này nằm trên div có thể chỉnh sửa. Các hành vi tương tự là rõ ràng trong Chrome, FireFox và Opera. Đáng ngạc nhiên là IE cần mã hoàn toàn khác nhau, nhưng không có bất kỳ vấn đề ở đó, khác hơn là chỉ là IE.

Rất cám ơn.

Answer 1

Chỉnh sửa bài viết của tôi:

Thử nghiệm một chút, tôi thấy rằng sel.toString() lợi nhuận dòng mới trong divs contenteditable, trong khi lợi nhuận range.toString() dòng mới một cách chính xác trong divs không thể chỉnh sửa bình thường, nhưng không phải trong những có thể chỉnh sửa, như bạn báo cáo.

Không thể tìm thấy bất kỳ lời giải thích nào về hành vi này.

Đây là một liên kết hữu ích http://www.quirksmode.org/dom/range_intro.html

Answer 2

tôi thấy ít nhất hai cách khác, vì vậy bạn vẫn có thể sử dụng phạm vi để tìm vị trí của dấu nháy trong Mozilla.

Một cách là gọi

var documentFragment = rangeObj.cloneContents(); 

nắm giữ một mảng của childNodes, và bất kỳ ngắt dòng sẽ hiển thị như là một nút của lớp "HTMLBRElement".

Cách khác là đảm bảo mỗi thẻ "br" được theo sau bởi ký tự dòng mới (0x0a)!

Điều này sẽ không làm tổn hại nội dung HTML theo bất kỳ cách hiển thị nào, nhưng giờ đây tất cả các ngắt HTML được dịch sang ngắt dòng văn bản thuần túy ngay khi range.toString() đang được gọi!

Tôi hy vọng điều này sẽ giúp - ngay cả khi chủ đề này rất cũ. (Tôi là một necromancer anyway, hehe) :)