2010-10-11 33 views
8

Tôi cần nhận mã html thực tế của phần tử trong trang web.Sử dụng javascript để lấy mã html thô

Ví dụ nếu mã html thực tế bên trong phần tử là "How to fix"

Chạy javascript này getElementById ('Mye'). InnerHTML mang lại cho tôi "How to fix" đó là hình thức giải mã

Làm thế nào tôi có thể nhận được "How to fix" sử dụng javascript?

+1

Thuộc tính Javascript chính xác là 'innerHTML', không phải' innerHtml' – romaintaz

+0

Đảm bảo rằng khi bạn đang hiển thị chuỗi từ 'getElementById ('myE'). InnerHtml' không được hiểu là HTML không dẫn đến hiển thị mã không gian không phá vỡ. –

Trả lời

4

Những gì bạn có nên làm việc:

phần tử thử nghiệm:

<div id="myE">How to&nbsp;fix</div>​ 

thử nghiệm JavaScript:

alert(document.getElementById("myE​​​​​​​​").innerHTML); //alerts "How to&nbsp;fix" 

You can try it out here. Đảm bảo rằng bất cứ nơi nào bạn đang sử dụng bằng cách sử dụng kết quả không hiển thị là &nbsp; làm khoảng trống. Nếu bạn muốn hiển thị nó ở đâu đó được thiết kế cho HTML, bạn sẽ cần phải thoát khỏi nó.

+3

Tính năng này chỉ hoạt động đối với một số thực thể. Các tham chiếu thực thể như '& eacute;' không xuất hiện trong 'innerHMTML'; thay vào đó ký tự được biểu thị, chẳng hạn như 'é', xuất hiện ở đó. –

17

Bạn không thể nhận được thực tế nguồn HTML của một phần trang web của bạn.

Khi bạn cung cấp cho trình duyệt web một trang HTML, nó phân tích cú pháp HTML thành một số nút DOM là phiên bản cuối cùng của tài liệu của bạn theo như trình duyệt có liên quan. DOM giữ thông tin quan trọng từ HTML — giống như bạn đã sử dụng ký tự Unicode U + 00A0 Không gian Breaking trước từ fix — nhưng không phải thông tin không liên quan mà bạn đã sử dụng thông qua tham chiếu thực thể thay vì chỉ nhập ( ).

Khi bạn yêu cầu trình duyệt cho nút phần tử innerHTML, nó không cung cấp cho bạn nguồn HTML gốc được phân tích cú pháp để tạo nút đó, bởi vì nó không còn có thông tin đó nữa. Thay vào đó, nó tạo ra HTML mới từ dữ liệu được lưu trữ trong DOM. Trình duyệt quyết định cách định dạng tuần tự HTML đó; các trình duyệt khác nhau tạo ra các HTML khác nhau và rất có thể nó sẽ không giống như cách bạn định dạng ban đầu.

Đặc biệt,

  • tên phần tử có thể thượng hoặc thấp hơn cased;

  • thuộc tính có thể không theo thứ tự như bạn đã nêu trong HTML;

  • trích dẫn thuộc tính có thể không giống như trong nguồn của bạn. IE thường tạo ra các thuộc tính không được trích dẫn mà thậm chí không phải là HTML hợp lệ; tất cả những gì bạn có thể chắc chắn là số innerHTML được tạo sẽ an toàn để sử dụng trong cùng một trình duyệt bằng cách viết nó vào một phần tử khác là innerHTML;

  • không được sử dụng tham chiếu thực thể cho bất kỳ điều gì trừ các ký tự không thể đưa trực tiếp vào nội dung văn bản: ký hiệu, số ít và giá trị thuộc tính-giá trị. Thay vì trả lại &nbsp;, nó có thể chỉ cung cấp cho bạn ký tự thô  .

Bạn không có thể thấy rằng đó là một không gian không bị phá hủy, nhưng nó vẫn là một và nếu bạn chèn HTML vào yếu tố khác nó sẽ hoạt động như một. Bạn không nên cần phải dựa vào bất cứ nơi nào một nhân vật không gian không bị phá hủy là thực thể thoát để &nbsp; ... nếu bạn làm thế, đối với một số lý do, bạn có thể nhận được rằng bằng cách làm:

x= el.innerHTML.replace(/\xA0/g, '&nbsp;') 

nhưng đó là chỉ thoát U + 00A0 và không phải bất kỳ hàng nghìn ký tự Unicode nào khác, do đó, có một chút vấn đề.

Nếu bạn thực sự cần nhận HTML nguồn thực tế của trang, bạn có thể tạo XMLHttpRequest thành URL của riêng mình (location.href) và nhận nguồn HTML đầy đủ, chưa được phân tích trong responseText. Hầu như không bao giờ có lý do chính đáng để làm điều này.

+1

Công cụ tốt @bobince. Tôi đã tìm thấy một trường hợp sử dụng vô lý cho ý tưởng XMLHttpRequest của bạn. Tôi đang làm việc với [ polyfill] (https://github.com/scottjehl/picturefill) và IE9 đang _helpfully_ tước các phần tử con khỏi DOM. Lấy HTML chưa được phân tích đang thực hiện thủ thuật. – Pat

Các vấn đề liên quan