html_selector

htmlから特定の項目を選択します。XPATHやjQueryのセレクターが使えます

説明
定義
html_selector(HTML文字列,セレクター);
引数
1.HTMLを含む文字列
HTMLタグを含む文字列を書きます。
2.セレクター
取得したノードを指定します。
XPATHみたいな方法と、jQueryみたいな方法の２つの方法のどちらでも利用できます。


XPATHのような方法
html_selector(html,"/html/body/div[2]/");

jQueryのような方法
html_selector(html,"#divid");
戻り値
文字列リストで結果が返されます。
この関数は同期処理されます。
例
var html = "<html>"
	 + "	<body>"
	 + "		<div id='id_name'>"
	 + "			div1<span>hoge1</span>"
	 + "		</div>"
	 + "		<div class='class_name'>"
	 + "			div2<span>hoge2</span>"
	 + "		</div>"
	 + "		<div>"
	 + "			div3<span>hoge</span>"
	 + "		</div>"
	 + "		<div>"
	 + "			div4"
	 + "		</div>"
	 + "	</body>"
	 + "</html>";
		
//div要素を取得します。
var list = html_selector(html,"div");

//結果はリストで返されます。
//[<div id='id_name'>			div1<span>hoge1</span>		</div>,<div class='class_name'>			div2<span>hoge2</span>		</div>,<div>			div3<span>hoge</span>		</div>,<div>			div4		</div>]
alert( list );

//4個の要素になります。
//4
alert( list.length );

//<div id='id_name'>			div1<span>hoge1</span>		</div>
alert( list[0] );
//<div class='class_name'>			div2<span>hoge2</span>		</div>
alert( list[1] );
//<div>			div3<span>hoge</span>		</div>
alert( list[2] );
//<div>			div4		</div>
alert( list[3] );

		
//id="id_name" 要素を取得します。
var list = html_selector(html,"#id_name");
//[<div id='id_name'>			div1<span>hoge1</span>		</div>]
alert( list );
		
//class="class_name" 要素を取得します。
var list = html_selector(html,".class_name");
//[<div class='class_name'>			div2<span>hoge2</span>		</div>]
alert( list );
		
//XPath風にも記述できます。
// /html/body/div[2]/
//htmlタグ直下のbodyタグ直下の2番目にあるdivタグの要素を取得します。
var list = html_selector(html,"/html/body/div[2]/");
//[<div class='class_name'>			div2<span>hoge2</span>		</div>]
alert( list );
		
//htmlタグ直下のbodyタグ直下の2番目にあるdivタグ内のテキストだけを取得します。
var list = html_selector(html,"/html/body/div[2]/text()");
//[div2]
alert( list );
		
//divタグをすべて取得します。
var list = html_selector(html,"//div");
//[<div id='id_name'>			div1<span>hoge1</span>		</div>,<div class='class_name'>			div2<span>hoge2</span>		</div>,<div>			div3<span>hoge</span>		</div>,<div>			div4		</div>]
alert( list );
		
//divタグでid="id_name"のものを取得します
var list = html_selector(html,"//div[@id='id_name']");
//[<div id='id_name'>			div1<span>hoge1</span>		</div>]
alert( list );
		
//2番目のdivタグのspanタグの中を取得します。
var list = html_selector(html,"//div[2]/span");
//[<span>hoge2</span>]
alert( list );
例2 絶対指定
var html = "<html>"
+"<body>"
+"	<div>"
+"		<p>1p1</p>"
+"		<p>1p2</p>"
+"		<p>1p3</p>"
+"	</div>"
+"	<div>"
+"		<p>2p1</p>"
+"		<p>2p2</p>"
+"		<p>2p3</p>"
+"		<p>2p4</p>"
+"	</div>"
+"	<div>"
+"		<p>3p1</p>"
+"		<p class='ohagi'>3p2</p>"
+"		<p class='mmmm'>3p3</p>"
+"	</div>"
+"	<div>"
+"		<p>4p1</p>"
+"		<p>4p2</p>"
+"		<p>4p3</p>"
+"	</div>"
+"</body>"
+"</html>";
		
//ある要素の下にある2番目pタグを取得する
//要素の下にある2番目のpタグは、4つあります。
var list = html_selector(html,"//p[2]");
//[<p>1p2</p>,<p>2p2</p>,<p class='ohagi'>3p2</p>,<p>4p2</p>]
alert(list);  
		
//上から数えて2番目のpタグだけ欲しい場合は、 [$2] とします。(FHC独自拡張/元ネタはexcelとかの絶対番地指定)
var str = html_selector(html,"//p[$2]");
//[<p>1p2</p>]
alert(str);
注意とヒント
参考

不明点について

FAQ

不明点については、こちらのFAQをご覧ください。

お問い合わせ

何かお困りのことがありましたら、こちらのお問い合わせフォームより、お気軽にお問い合わせください。