Tôi có một bộ div là contentEditable và được tạo kiểu với "white-space:pre" để nó giữ những thứ như vạch nét. Trong Safari, FF và IE, div trông khá giống nhau và hoạt động giống nhau. Tất cả đều tốt. Những gì tôi muốn làm là trích xuất văn bản từ div này, nhưng theo cách như vậy sẽ không mất định dạng - cụ thể, ngắt dòng.Trích xuất văn bản từ một contentEditable div
Chúng tôi đang sử dụng jQuery, có chức năng text() về cơ bản thực hiện DFS đặt hàng trước và dán tất cả nội dung trong nhánh đó của DOM vào một khối duy nhất. Điều này sẽ mất định dạng.
Tôi đã xem xét chức năng html(), nhưng có vẻ như cả ba trình duyệt đều làm những việc khác nhau với HTML thực tế được tạo phía sau hậu trường trong div contentEditable của tôi. Giả sử tôi gõ này vào div của tôi:
1
2
3
Đây là kết quả:
Safari 4:
1
<div>2</div>
<div>3</div>
Firefox 3.6:
1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">
IE 8:
<P>1</P><P>2</P><P>3</P>
Ugh. Không có gì rất phù hợp ở đây. Điều đáng ngạc nhiên là MSIE trông có vẻ lành mạnh nhất! (Thẻ được viết hoa P và tất cả)
Div sẽ tự động đặt kiểu (khuôn mặt, màu, kích thước và căn chỉnh) được thực hiện bằng CSS, vì vậy tôi không chắc liệu mình có thể sử dụng thẻ pre hay không ám chỉ đến một số trang tôi đã tìm thấy bằng Google).
Có ai biết về bất kỳ mã JavaScript và/hoặc plugin jQuery nào hay thứ gì đó sẽ trích xuất văn bản từ div nội dung có thể chỉnh sửa theo cách sao cho bảo vệ ngắt dòng không? Tôi không muốn phát minh lại bánh xe phân tích nếu tôi không phải làm như vậy.
Cập nhật: Tôi đã nới lỏng chức năng getText từ jQuery 1.4.2 và sửa đổi nó để trích xuất nó với khoảng trắng hầu như nguyên vẹn (tôi chỉ chnaged một dòng mà tôi thêm một dòng mới);
function extractTextWithWhitespace(elems) {
var ret = "", elem;
for (var i = 0; elems[i]; i++) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if (elem.nodeType === 3 || elem.nodeType === 4) {
ret += elem.nodeValue + "\n";
// Traverse everything else, except comment nodes
} else if (elem.nodeType !== 8) {
ret += extractTextWithWhitespace2(elem.childNodes);
}
}
return ret;
}
tôi gọi chức năng này và sử dụng sản lượng của nó để gán nó vào một nút XML với jQuery, một cái gì đó như:
var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);
kết quả XML cuối cùng được gửi đến một máy chủ thông qua một cuộc gọi AJAX.
Tính năng này hoạt động tốt trong Safari và Firefox.
Trên IE, chỉ lần đầu tiên '\ n' dường như được giữ lại bằng cách nào đó. Nhìn vào nó nhiều hơn, có vẻ như jQuery là thiết lập các văn bản như vậy (dòng 4004 của jQuery-1.4.2.js):
return this.empty().append((this[0] && this[0].ownerDocument || document).createTextNode(text));
Đọc lên trên createTextNode, dường như thực hiện của IE có thể nghiền nát lên khoảng trắng . Điều này đúng hay tôi đang làm điều gì sai?
Thật thú vị, không ngạc nhiên khi IE hoạt động mạnh nhất: contentEditable ban đầu là độc quyền của IE; nó nằm trong IE từ 5.5, vì vậy tôi đoán họ đã có nhiều thời gian nhất để nó hoạt động tốt. – Yahel