2012-02-08 22 views
6

多分これは非常に基本的ですが、私はすべて混乱しています。 私は、多くのセクション(div)を持つ単純なhtmlページを持っています。私はJavaScriptのhtmlタグを含む文字列を持っています。次のようにコードは次のとおりです。javascriptまたはjqueryを使用して文字列からhtmlタグの内容を抽出する方法は?

<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> 

私は(JavaScriptで文字列から)htmlタグの内容を抽出し、所望のセクションで私のhtmlページにそのコンテンツを表示したいです。

つまり、これは<div id="title1">に表示されている「これは見出し1です」と「これは段落1です。」とします。 <div id="new1">に表示され、2番目のタグのペアでも同じです。

私はこのすべてがクライアント側でのみ動作する必要があります。私はHTML DOM getElementByTagNameメソッドを使用しようとしましたが、複雑すぎます。私はjqueryをほとんど知りません。そして私は混乱しています。私はそれについてどうやって行くのか分かりません。あなたは私に何を使用するか教えてくれますか?それともjavascriptかjqueryとその使い方ですか?文字列から文字列を識別し、それを繰り返し処理する方法はありますか?

str1から "これは見出し1"(と同様の内容がhtmlタグで囲まれています)を抽出する方法は?私はこれらのインデックスがわからないので、substr()またはsubstring()関数をjavascriptで使用することはできません。

答えて

9

  • ターゲット我々は記入したいページ上の要素を
  • は、それがコンテンツ提供します から文字列

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を参照してください。..それは働いていました。.. – user1196522

1

まあ、

あなたがあなた自身のhtmlからソースHTMLを取得しているか明確にすべきまず第一に。 Ajaxを使用している場合は、ソースをhtml、さらにはxmlとしてチェックする必要があります。

0

のdocument.getElementById( '{要素のID}')のinnerHTML

もし使用jqueryの $( 'セレクタ')HTML()。。。 「ゲッター」と「セッター私たちはただのパターンを繰り返すことができ、両方として.text()を使用して

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

私は、私は完全にあなたがしかし、私はあなたが(あなたはそれがすべてのような音作りが)一部を交換したいを考える...何をしたいのかを理解しないと思う知識を持つ私の答えはじめてみよういくつかのデータソースを持つhtml。私は簡単な例を装備しました

はここにjsfiddleです:

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

この単純なターゲットは、divの上にjQueryを使って置き換えません。

希望、これは幸運を助けます。

2

IMHO、あなたは二つのステップでjqueryの中でこれを行うことができます:

ステップ1)XML/HTML文書に文字列を解析します。

これを行うには、少なくとも2つの方法があります。

A)Sinetheta

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

bで述べたように)parseXML

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

を使用してhttp://api.jquery.com/jQuery.parseXML/

を参照してください手順2)tを選択XML/HTMLドキュメントからのext。

var text = $htmlDoc.text(jquery_selector); 

http://api.jquery.com/text/

関連する問題