jQuery văn bản() gọi bảo tồn dòng mới trong Firefox nhưng không phải trong IE

Question

tôi đang làm:

alert($("#div").text()); 

trên một cái gì đó như thế này:

<div id="div"> 
&lt;div&gt; 
Some text 
&lt;div&gt; 
</div> 

Tại sao nội dung thoát? Bởi vì nó đôi khi không đúng định dạng và tôi không muốn nó can thiệp hoặc phá vỡ phần còn lại của tài liệu.

Trong FF, nó hiển thị bảo quản dòng mới. Trong IE7 nó không. Tôi cần phải bảo tồn không gian màu trắng. Nội dung này thực sự đang diễn ra trong một vùng văn bản để chỉnh sửa.

Và trước khi bất kỳ ai đề xuất trình chỉnh sửa văn bản có định dạng, mã này thực sự không phải là HTML. Đó là một phương ngữ tùy chỉnh.

Vậy làm cách nào để giữ các dòng mới trong IE?

Answer 1

Dường như đây là vấn đề của tôi: The Internet Explorer innerHTML Quirk:

Tuy nhiên, innerHTML có một vấn đề trong Internet Explorer.

Tiêu chuẩn HTML yêu cầu chuyển đổi khi hiển thị nội dung. Tất cả các loại và số lượng khoảng trắng liền kề được thu gọn thành một không gian duy nhất. Đây là một điều tốt - giống như một ví dụ, nó cho phép tôi thêm rất nhiều ngắt dòng vào tệp nguồn này mà không cần phải lo lắng về ngắt dòng kỳ lạ trong văn bản được hiển thị.

Internet Explorer áp dụng các chuyển đổi này khi chuyển nhượng cho thuộc tính innerbên trong. Điều này có vẻ như ý tưởng hay: nó tiết kiệm một chút thời gian trong khi hiển thị, vì nếu đại diện trong bộ nhớ đã được bình thường, thì trình duyệt không phải bình thường hóa khi cần hiển thị văn bản .

Tuy nhiên, có một số ngoại lệ đối với quy tắc chuẩn hóa . Đáng chú ý, đây là các phần tử văn bản < textarea>, phần tử < trước> và trong CSS-aware trình duyệt, các phần tử có giá trị bất kỳ nhưng bình thường đối với thuộc tính không gian trắng.

Internet Explorer không tôn trọng các trường hợp đặc biệt này. Thứ ba làm cho tối ưu hóa của chúng là một ý tưởng tồi, bởi vì khoảng trắng có thể thay đổi khi chạy, ví dụ thông qua DOM. Trong mọi trường hợp , Internet Explorer sẽ bình thường hóa tất cả các bài tập cho thuộc tính innerHTML , do đó gây ra hiệu ứng được minh họa bên dưới.

Văn bản này điền vào vùng văn bản tại trang tải. Điều này cũng chứa dấu ngắt dòng và nhiều khoảng trắng. Định dạng là cũng được giữ nguyên ở đây, ngoại trừ UA có thể ngắt dòng.

(nhấn mạnh thêm)

Và quả thực nếu tôi thay đổi nó để:

<div id="div"> 
<pre> 
... 
</pre> 
</div> 

và

$("#div pre").text() 

hoặc đơn giản là:

<style type="text/css"> 
#div { white-space: pre } 
</style> 

tất cả đều hoạt động kỳ diệu.

Answer 2

Không chắc chắn nếu điều này sẽ giúp đỡ, nhưng có lẽ bạn có thể thử này:

#div { 
    white-space: pre; 
} 

Answer 3

Xem here cho một workaround:

Các hack là lần đầu tiên sao chép các yếu tố bạn muốn nội dung trong số, sử dụng cloneNode().

Tiếp theo, bạn tạo thành phần <pre> với createElement(), sau đó nối thêm nút nhân bản của bạn vào đó.

Bây giờ bạn có thể lấy phần bên trong của phần tử tạo <pre> và chỉ xóa các đối tượng tạm thời. Bây giờ bạn có khoảng trắng bảo quản văn bản :)

var cloned = targetElement.cloneNode(true); 
var pre = document.createElement("pre"); 
pre.appendChild(cloned); 
var textContent = pre.textContent ? 
    pre.textContent : pre.innerText; 
delete pre; 
delete cloned; 

Lý do tôi sao chép nguyên tố này là vì appendChild() sẽ kéo nó ra khỏi DOM và đó là nỗi đau của tái chèn lại đúng vị trí trong DOM.

Hy vọng điều này giúp một vài người ra có :)