オブジェクト索引
HTMLTextNode オブジェクトは html 中のテキストを表すオブジェクトです。
例えば
| メソッド名 | 説明 |
|---|---|
| after(html) | テキストの後ろに html を挿入する |
| before(html) | テキストの前に html を挿入する |
| isBlank() | 保持しているテキストが空白か判定する |
| nodeName() | 要素の型を文字列で返す |
| outerHtml() | テキストの html 表現を文字列で返す |
| parent() | テキストの親要素の HTMLElement オブジェクトを返す |
| remove() | テキストを文書から削除する |
| text() | テキストを文字列で返す |
| text(newText) | テキストを newText に置換する |
| wrap(html) | 指定した html でテキストをラップする |
テキストの後ろに html を挿入します。
テキストの後ろに挿入する html テキストを指定します。
HTMLTextNode オブジェクト。挿入された html ではなく、after() のターゲットになった HTMLTextNode が返される点に注意してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>こんにちは</p>
ここは HTMLTextNode で表現されます。
<p>さようなら</p>
</body>
</html>この html に対して「ここは HTMLTextNode で表現されます」というテキストの後に、新たな p 要素を追加してから展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.after() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-for list="body.childNodes()" variable="aNode">
<wr-if condition="aNode.nodeName() == \"HTMLTextNode\" && aNode.isBlank() != true">
%aNode.after("<p><em>挿入</em>してみました</p>")%
</wr-if>
</wr-for>
<hr>
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出して変数 body に入れておきます。
body に対して childNodes() メソッドを実行し、body 直下のノードの配列を取得します。取得した配列はそのまま wr-for の list= に渡してループを実行します。
ループの内側では、各ノードのタイプが "HTMLTextNode" であるかどうかを nodeName() メソッドで調べています。また、ノードが HTMLTextNode である場合には、そのノードが空でないかどうかを isBlank() メソッドで調べています。空でない HTMLTextNode が見つかったら aNode.after("<p><em>挿入</em>してみました</p>") を実行して p 要素を追加しています。
最後に body.html() を実行し、p 要素を付け加えた後の body の内側を展開しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.after() の example</title>
</head>
<body>
<hr>
<p>こんにちは</p> ここは HTMLTextNode で表現されます。
<p><em>挿入</em>してみました</p>
<p>さようなら</p>
</body>
</html>HTMLTextNode は select() メソッドで探し出すことができないので childNodes() メソッドを使っています。
before() メソッドも参照してください。
テキストの前に html を挿入します。
テキストの前に挿入する html テキストを指定します。
HTMLTextNode オブジェクト。挿入された html ではなく、before() のターゲットになった HTMLTextNode が返される点に注意してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>こんにちは</p>
ここは HTMLTextNode で表現されます。
<p>さようなら</p>
</body>
</html>この html に対して「ここは HTMLTextNode で表現されます」というテキストの前に、新たな p 要素を追加してから展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.before() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-for list="body.childNodes()" variable="aNode">
<wr-if condition="aNode.nodeName() == \"HTMLTextNode\" && aNode.isBlank() != true">
%aNode.before("<p><em>挿入</em>してみました</p>")%
</wr-if>
</wr-for>
<hr>
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出して変数 body に入れておきます。
body に対して childNodes() メソッドを実行し、body 直下のノードの配列を取得します。取得した配列はそのまま wr-for の list= に渡してループを実行します。
ループの内側では、各ノードのタイプが "HTMLTextNode" であるかどうかを nodeName() メソッドで調べています。また、ノードが HTMLTextNode である場合には、そのノードが空でないかどうかを isBlank() メソッドで調べています。空でない HTMLTextNode が見つかったら aNode.before("<p><em>挿入</em>してみました</p>") を実行して p 要素を挿入しています。
最後に body.html() を実行し、p 要素を付け加えた後の body の内側を展開しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.before() の example</title>
</head>
<body>
<hr>
<p>こんいちは</p>
<p><em>挿入</em>してみました</p> ここは HTMLTextNode で表現されます。
<p>さようなら</p>
</body>
</html>HTMLTextNode は select() メソッドで探し出すことができないので childNodes() メソッドを使っています。
after() メソッドも参照してください。
この HTMLTextNode が保持しているテキストが空白だけの場合に true を返します。何らかのテキストを保持している場合は false を返します。
真偽値 true または false
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>
</p>
<p> </p>
<p>あ</p>
</body>
</html>この htmlText の中にある、3つの p 要素について isBlank() メソッドを呼び出してどういう結果が得られるか試してみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.isBlank() の example</title></head>
<body>
<wr-for list="parseHtml(htmlText).select(\"p\").asArray()" variable="p">
<h1>%p.unwrap().isBlank()%</h1>
</wr-for>
</body>
</html>parseHtml() 関数で htmlText をパースして HTMLDocument オブジェクトを取得します。
取得した HTMLDocument オブジェクトに対して select("p") を実行し p 要素をすべて洗い出した結果を保持している HTMLElements オブジェクトを取得します。
各 p 要素について isBlank() を呼び出したいので HTMLElements に対して asArray() メソッドを呼び出し wr-for の list= に指定してループを実行します。
ループ内では p 要素を一旦 unwrap() します。この例では、各 p 要素の内側にそれぞれひとつずつ HTMLTextNode によって表現されるテキストが含まれています。先頭の p 要素は、改行をひとつだけ含む HTMLTextNode を持っています。二つめの p 要素は空白文字をひとつだけ含む HTMLTextNode を持っています。三つめの p 要素は「あ」という文字を一文字だけ含む HTMLTextNode を持っています。それぞれの HTMLTextNode について isBlank() を呼び出して結果を h1 要素の中に表示しています。
実行結果は下記の様になるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.isBlank() の example</title>
</head>
<body>
<h1>true</h1>
<h1>true</h1>
<h1>false</h1>
</body>
</html>改行文字や空白文字だけからなる HTMLTextNode に対しては isBlank() が true を返します。
要素の型を返します。childNodes() メソッドなどを呼び出すと、型の判らない子要素の配列が得られますが、各子要素の型を調べる時に nodeName() メソッドが役立ちます。
要素の型の名前を文字列で返します。HTMLComment オブジェクトに対してこのメソッドを呼び出すと "HTMLTextNode" が返されます。
このテキストを html で返します。
このテキストの html 表現を文字列で返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>こんにちは</p>
</body>
</html>この html に対して「こんにちは」の部分だけを抽出して展開に組込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.outerHtml() の example</title></head>
<body>
%parseHtml(htmlText).select("p").first().unwrap().outerHtml()%
</body>
</html>parseHtml() 関数で htmlText をパースし select("p").first() で先頭の p 要素を取り出します。取り出した p 要素に対して unwrap() メソッドを実行して、p 要素の先頭の子ノードとなっているテキスト「こんにちは」の部分を取り出します。取り出した HTMLTextNode に対して outerHtml() を実行して html を生成しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.outerHtml() の example</title>
</head>
<body>
こんにちは
</body>
</html>HTMLElement オブジェクトにも同様のメソッドがあります。
このテキストの親要素を返します。
このテキストの親要素の HTMLElement オブジェクトを返します。
使用方法については HTMLElement オブジェクトの parent() メソッドを参照してください。
remove() はこのテキストを文書から削除します。
null です。削除されたテキストにはアクセスできなくなりますので HTMLTextNode は返されません。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>remove() メソッドはテキストを削除するときに使用します。</p>
</body>
</html>この htmlText 中にある「remove() メソッドはテキストを削除するときに使用します。」の部分を削除してから、この html の body 部分を展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("p").first().childNodes()[0].remove()%
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body を取り出し、変数 body に格納します。
取り出した body 要素に対して select("p").first() で先頭の p 要素を取り出します。抽出した p 要素に対して childNodes() を実行して子ノードの配列を取得します。この例では、この配列の長さは 1 で、要素は HTMLTextNode オブジェクトになります。配列に [0] を適用して先頭要素を取り出し、それに対して remove() を実行して削除しています。
最後に body.html() を実行して、p 要素の内側のテキストが削除されたあとの body 要素の内側の html を生成して展開に組み込んでいます。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p></p>
</body>
</html>このコードはあくまでもサンプルです。%body.select("p").first().html("")% の方が簡単に同じことができるでしょう。
この HTMLTextNode のテキストを返します。
この HTMLTextNode のテキストが文字列で返されます。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head></head>
<body>Q & A</body>
</html>この htmlText 中の body 直下のテキストを text() でとりだした場合と outerHtml() でとりだした場合の違いを調べてみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.text() の example</title></head>
<body>
<wr-variable name="textNode" value="parseHtml(htmlText).body().childNodes()[0]" />
<h1>text()</h1>
<wr-for string="textNode.text()" variable="c">[%c%]</wr-for>
<h1>outrHtml()</h1>
<wr-for string="textNode.outerHtml()" variable="c">[%c%]</wr-for>
</body>
</html>parseHtml() 関数を使って htmlText をパースし body() メソッドで body 要素を取り出します。その次に body の子ノードを childNodes() で取り出しています。この例では childNodes() の戻り値は長さ1の配列です。配列の要素は "Q & A" というテキストを保持している HTMLTextNode オブジェクトです。配列に [0] を適用して配列の先頭の要素を取り出し、それそ textNode という変数に保持しておきます。
textNode から text() で取り出した文字列を wr-for の string= に渡して、一文字づつループしています。ループ内では [%c%] というコードで文字を出力しています。
同じように、textNode から outerHtml() で取り出した文字列を wr-for の string= に渡して、一文字づつループしています。ループ内では [%c%] というコードで文字を出力しています。
この展開の実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.text() の example</title>
</head>
<body>
<h1>text()</h1> [Q][ ][&][ ][A]
<h1>outrHtml()</h1> [ ][Q][ ][&][a][m][p][;][ ][A]
</body>
</html>text() で取り出したテキストは html ではなくテキストそのものなので & 記号が & にエスケープされていない点に注意してください。outerHtml() メソッドで取り出したテキストは、その値が html なので & 記号は & にエスケープされています。
上記実行結果の [&] の部分は、ブラウザによっては [&] と表示される場合があります。コードをみてお判りのとおり、c は1文字なので & と表示されていても、それは1文字の & のことを表しているはずです。
この要素と、そのすべての子要素中のテキストをつなぎ合わせて返します。または、この要素のテキストを書き換えます。
この要素のテキストが指定された文字列で置き換えられます。
HTMLElement オブジェクトが返されます。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>こんにちは</h1>
<p>Hello World!</p>
</body>
</html>この htmlText の中にある p 要素についてその内側のテキスト "Hello World!" を "It's fine today." に書き換えてか body の内側全体を展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.text() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-variable name="textNode" value="body.select(\"p\").first().childNodes()[0]" />
%textNode.text("It's fine today.")%
%body.html()%
</body>
</html>parseHtml() 関数を使って htmlText をパースします。その body 要素を body() メソッドで取り出して変数 body に保持しておきます。
次に、body に select("p") を実行して body 中の p 要素を洗い出します。書き換え対象をその先頭の p 要素とするために first() メソッドで先頭の p 要素を取り出します。さらに、first() メソッドの戻り値として得られた HTMLElement オブジェクトに対して childNodes() メソッドを実行して子ノードの配列を取り出します。今回の場合、子ノードは "Hello World!" に対応する HTMLTextNode オブジェクトがひとつだけです。配列に [0] を適用して先頭の HTMLTextNode を取り出し、それを変数 textNode に保持しておきます。
取り出した textNode に対して text("It's fine today.") を実行してテキストを書き換えます。
最後に、body.html() を実行し、書き換えたあとの body を展開中に組み込んでいます。
この展開の実行結果は下記の様になるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.text() の example</title>
</head>
<body>
<h1>こんにちは</h1>
<p>It's fine today.</p>
</body>
</html>この例はあくまでサンプルです。%body.select("p").first().html("It's fine today.")% の方が簡単に同じ結果を得ることができるでしょう。
このテキストを、与えられた html でラップします。
このテキストを wrap する html を文字列で指定します。
HTMLTextNode オブジェクト。wrap される前の HTMLTextNode が返される点に注意してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>remove() メソッドはテキストを削除するときに使用します。</p>
</body>
</html>この htmlText 中にある「<p>remove() メソッドはテキストを削除するときに使用します。</p> 」の部分を、h1 タグに書き換えてから、この html の body 部分を展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("p").first().unwrap().wrap("<h1></h1>")%
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body を取り出し、変数 body に格納します。
取り出した body 要素に対して select("p").first() で先頭の p 要素を取り出します。抽出した p 要素に対して unwrap() を実行して p タグを除去します。unwrap() の戻り値は unwrap() された p 要素の先頭の子ノードになるので、この例では「remove() メソッドはテキストを削除するときに使用します。」という HTMLTextNode になります。この HTMLTextNode に wrap("<h1></h1>") を実行して h1 タグで囲んでいます。
最後に body.html() を実行して、p 要素を h1 要素に書き換えた後の body 要素の内側の html を生成して展開に組み込んでいます。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>remove() メソッドはテキストを削除するときに使用します。</h1>
</body>
</html>