テキストノードをタグで囲うには?
- 詳細
- カテゴリ: テンプレート
- 作成日:2016-08-30
以下のようなHTMLのテキストノード部分をタグで囲う場合を想定します。
<div id="textParent">
ここはテキストノードです。
<p class="tag_area">ここはpタグに囲われています。</p>
ここもテキストノードです。
</div>
gc-scriptで以下の記述を行うことで対応が可能です。
jQuery('#textParent').contents().filter(function(){
if (this.nodeType == 3) {
//テキストノードのnodeTypeは3
var node = this.nodeValue;
if (node !=null && node.trim()!="") {
//空白ノードでなければ返す
return true;
} else {
//空白は返さない
return false;
}
} else {
//nodeTypeが3でないものは返さない
return false;
}
}).wrap("<span/>");
上記処理後のHTMLは以下になります。
<div id="textParent">
<span>ここはテキストノードです。</span>
<p class="tag_area">ここはpタグに囲われています。</p>
<span>ここもテキストノードです。</span>
</div>
同様の処理としてはjqueryの".wrap()"や、".wrapInner()"があります。
".wrap()"を使用した場合のHTMLは以下になります。
<span>
<div id="textParent">
ここはテキストノードです。
<p class="tag_area">ここはpタグに囲われています。</p>
ここもテキストノードです。
</div>
</span>
".wrapInner()"を使用した場合のHTMLは以下になります。
<div id="textParent">
<span>
ここはテキストノードです。
<p class="tag_area">ここはpタグに囲われています。</p>
ここもテキストノードです。
</span>
</div>