Supertrue walfo

JavaScriptでHTMLのコメントの内容を取得する

JavaScriptでHTMLのコメント(<!– –>)の内容を取得する。
Layzr.js という、画像の遅延読み込み系ライブラリで、画像をコメント内部に隠しておいてそのときがきたらコメントを外すという処理をしていて、なるほどと思ったので試してみようかと。

実践

まずはHTMLでコメントを用意。

<div class="comment">
  <!-- <p>コメントですよ</p> -->
</div>

コメントの親要素を取得。 (Nodeが取れれば方法はなんでもよい)

var parent = document.querySelectorAll('.comment')[0];

取得した親要素の子要素すべてを配列に変換

var contents = Array.prototype.slice.call(parent.childNodes);

配列の中は node で、nodeType というパラメータを持っています。 コメントノードの nodeType8 なので、 nodeType === 8 でフィルタリングして絞り込む

var comments = contents.filter(function(node) {
  return node.nodeType === 8; 
});

あとは、nodedata パラメータの中を覗き見るだけ。 ひとまず、配列をマッピングしつつコンソール出力。

comments.map(function(node) {
  // コメントノードの `data` パラメータに入っている
  // 前後に空白がある場合があるので `trim` しておく
  console.log(node.data.trim());
});

まとめ

まとめて関数化してテスト

リンク

おわり

2015年6月12日 19:21
2015年6月13日 10:08 編集済み