オブジェクト索引
HTMLComment オブジェクトは html 中のコメントを表すオブジェクトです。
paraseHtml() 関数で html テキストをパースすると、テキスト中の html コメントの部分は HTMLComment オブジェクトになります。例えば
| メソッド名 | 説明 |
|---|---|
| after(html) | コメントの後ろに html を挿入する |
| before(html) | コメントの前に html を挿入する |
| getData() | 記述されているコメントのテキスト部分を返す |
| nodeName() | 要素の型を文字列で返す |
| outerHtml() | コメントの html 表現を文字列で返す |
| parent() | コメントの親要素の HTMLElement オブジェクトを返す |
| remove() | コメントを文書から削除する |
| wrap(html) | コメントを指定した html でラップする |
コメントの後ろに html を挿入します。
コメントの後ろに挿入する html テキストを指定します。
HTMLEComment オブジェクト。挿入された html ではなく、after() のターゲットになった HTMLComment が返される点に注意してください。
このメソッドは、指定された html がコメントの後ろに追加される点を除いて before() メソッドと同じです。
コメントの前に html を挿入します。
要素の前に挿入する html テキストを指定します。
HTMLEComment オブジェクト。挿入された html ではなく、before() のターゲットになった HTMLComment が返される点に注意してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<!-- copyright -->
</body>
</html>この html に対して、<!-- copyright --> というコメントを copyright 宣言に書き換えてから展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-for list="body.getAllComments()" variable="aComment">
<wr-if condition='trim(aComment.getData()) == "copyright"'>
%aComment.before("<span class=\"copyright\">Copyright © 2015 FrameWorks Software, Inc. All rights reserved.</span>").remove()%
</wr-if>
</wr-for>
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出して変数 body に入れておきます。
取り出した body 要素に対して getAllComments() メソッドを呼び出し body 内のすべてのコメントを抽出します。HTMLComment の抽出は select() ではできませんので getAllComments() を使用します。抽出結果を wr-for の list= に渡してループを実行します。ループ内では、個々のコメントに対して処理を行います。
コメントの内容は getData() メソッドで取り出します。この結果を trim() 関数で前後の空白を除去した結果が "copyright" という文字列になっている場合、そのコメントをコピーライト宣言に書き換えます。まず before() メソッドでコメントの直前にコピーライト宣言を挿入します。その上で、そのコメントはもはや不要になったので remove() で削除しています。
最後に body.html() を実行し、コメントをコピーライト宣言に書き換えた後の body の内側を展開しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<span class="copyright">Copyright © 2015 FrameWorks Software, Inc. All rights reserved.</span>
</body>
</html>after() も参照してください。
このコメントに記述されているコメントのテキスト部分を返します。
このコメントに記述されているコメントのテキスト部分を文字列で返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- コメント#1 -->
</body>
</html>この html に対して、body 内にあるコメントの内容だけを抽出して展開に組込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLComment.getData() の example</title></head>
<body>
<wr-for list="parseHtml(htmlText).body().getAllComments()" variable="comment">
%trim(comment.getData())%
</wr-for>
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出し、getAllComments() メソッドを呼び出してコメントのリストを取得します。
getAllComments() メソッドの戻り値は HTMLComment オブジェクトの配列です。そのまま wr-for の list= に指定することができます。
個々のコメントを trim(comment.getData()) メソッドで展開しています。getData() の戻り値は前後に空白文字がついている場合があるので trim() 関数でそれらを除去しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLComment.getData() の example</title>
</head>
<body>
コメント#1
</body>
</html>要素の型の名前を返します。
要素の型の名前を文字列で返します。HTMLEComment オブジェクトに対してこのメソッドを呼び出すと "HTMLComment" が返されます。
このコメントを html で返します。
このコメントの html 表現を文字列で返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- コメント#1 -->
</body>
</html>この html に対して、body 内にあるコメントだけを抽出して展開に組込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLComment.outerHtml() の example</title></head>
<body>
<wr-for list="parseHtml(htmlText).body().getAllComments()" variable="comment">
%comment.outerHtml()%
</wr-for>
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出し、getAllComments() メソッドを呼び出してコメントのリストを取得します。
getAllComments() メソッドの戻り値は HTMLComment オブジェクトの配列です。そのまま wr-for の list= に指定することができます。
個々のコメントを outerHtml() メソッドで展開しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLComment.outerHtml() の example</title>
</head>
<body>
<!-- コメント#1 -->
</body>
</html>HTMLElement オブジェクトにも同様のメソッドがあります。
このコメントの親要素を返します。
このコメントの親要素の HTMLElement オブジェクトを返します。
使用方法については HTMLElement オブジェクトの parent() メソッドを参照してください。
remove() はこのコメントを文書から削除します。
null です。削除されたコメントにはアクセスできなくなりますので HTMLComment は返されません。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<!-- コメントです -->
<p>
remove() メソッドはコメントを削除するときに使用します。
<!-- これもコメントです -->
</p>
</body>
</html>この htmlText 中にあるコメントを取り出して削除してから、この html の body 部分を展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-for list="body.getAllComments()" variable="aComment">
%aComment.remove()%
</wr-for>
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body を取り出し、変数 body に格納します。
取り出した body 要素に対して getAllComments() メソッドを呼び出し body 内のすべてのコメントを抽出します。HTMLComment の抽出は select() ではできませんので getAllComments() を使用します。抽出結果を wr-for の list= に渡してループを実行します。ループ内では、個々のコメントを remove() しています。
最後に body.html() を実行して、コメントが削除されたあとの body 要素の内側の html を生成して展開に組み込んでいます。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p> remove() メソッドはコメントを削除するときに使用します。 </p>
</body>
</html>このコメントを、与えられた html でラップします。
コメントを wrap する html を指定します。
HTMLComment オブジェクト。wrap される前の HTMLComment が返される点に注意してください。
使用方法については HTMLElement オブジェクトの wrap() メソッドを参照してください。