2012-02-08 35 views
6

Có lẽ điều này rất cơ bản, nhưng tất cả tôi đều bối rối. Tôi có một trang html đơn giản với nhiều phần (div). Tôi có một chuỗi chứa các thẻ html trong javascript. Mã như sau:Làm thế nào để trích xuất nội dung của các thẻ html từ một chuỗi bằng cách sử dụng javascript hoặc jquery?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript"> 
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>"; 
</script> 
</head> 
<body> 
<div id="title1"></div> 
<div id="new1"></div> 
<div id="title2"></div> 
<div id="new2"></div> 
</body> 
</html> 

Tôi muốn trích xuất nội dung của thẻ html (từ chuỗi trong javascript) và hiển thị nội dung đó trong trang html của tôi trong phần mong muốn.

tức là tôi muốn "Đây là tiêu đề 1" được hiển thị trong <div id="title1"> và "Đây là đoạn 1". được hiển thị trong <div id="new1"> và tương tự cho cặp thẻ thứ hai.

Tôi cần tất cả điều này để chỉ hoạt động ở phía khách hàng. Tôi đã cố gắng sử dụng phương thức getElementByTagName của DOM và quá phức tạp. Tôi biết rất ít jquery. Và tôi bối rối. Tôi không hiểu làm thế nào để đi về nó. Bạn có thể hướng dẫn tôi những gì để sử dụng - javascript hoặc jquery và làm thế nào để sử dụng nó? Có cách nào để xác định từ chuỗi và lặp qua nó?

Cách trích xuất "Đây là tiêu đề 1" (và nội dung tương tự được đính kèm trong thẻ html) từ str1 ?? Tôi không biết chỉ số của những do đó không thể sử dụng substr() hoặc substring() chức năng trong javascript.

Trả lời

9

Sử dụng .text() như cả một 'getter' và một 'setter' chúng tôi chỉ có thể lặp lại các mô hình của:

  • mục tiêu các yếu tố trên trang chúng tôi mong muốn điền
  • cho nó nội dung từ chuỗi

jsFiddle

<script type="text/javascript"> 
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>"; 
$(function(){ 
    var $str1 = $(str1);//this turns your string into real html 

    //target something, fill it with something from the string 
    $('#title1').text($str1.find('h2').eq(0).text()); 
    $('#new1').text($str1.find('p').eq(1).text()); 
    $('#title2').text($str1.find('h2').eq(1).text()); 
    $('#new2').text($str1.find('p').eq(1).text()); 
}) 
</script> 
+0

Thnks .. Nó làm việc .. – user1196522

1

Vâng,

Trước hết, bạn nên làm rõ cách bạn nhận html nguồn từ html của riêng bạn. Nếu bạn đang sử dụng Ajax, bạn nên đánh dấu nguồn là html, thậm chí xml.

0

document.getElementById ('{ID của element}') innerHTML

nếu sử dụng jquery $ ('chọn') html()..;

<div id="test">hilo</div> 
<script> 
alert($('#test').html()); 
<script> 
0

Hãy để tôi mở đầu câu trả lời của tôi với những kiến ​​thức mà tôi không nghĩ rằng tôi hoàn toàn hiểu những gì bạn muốn làm ... tuy nhiên tôi nghĩ bạn muốn thay thế một số (mặc dù bạn làm cho nó âm thanh như tất cả) html với một số nguồn dữ liệu.

Tôi đã gian lận một ví dụ đơn giản là jsfiddle đây:

http://jsfiddle.net/rS2Wt/9/

này thực hiện việc đơn giản thay thế sử dụng jquery trên một div mục tiêu.

Hy vọng điều này sẽ giúp, chúc may mắn.

2

IMHO, Bạn có thể làm điều này trong jquery theo hai bước:

Bước 1) Phân tích các chuỗi thành một tài liệu XML/HTML.

Có ít nhất hai cách để làm điều này:

a) Như đã đề cập bởi Sinetheta

var htmlString = "<html><div></div></html>"; 
var $htmlDoc = $(htmlString); 

b) Sử dụng parseXML

var htmlString = "<html><div></div></html>"; 
var htmlDoc = $.parseXML(htmlString); 
var $htmlDoc = $(htmlDoc); 

Vui lòng tham khảo http://api.jquery.com/jQuery.parseXML/

Bước 2) Chọn t ext từ tài liệu XML/HTML.

var text = $htmlDoc.text(jquery_selector); 

Vui lòng tham khảo http://api.jquery.com/text/

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