すたすた式
Blogger QooQ
記事内に「特定のコメント（コメントアウト）」が存在するかどうかを判定するJavaScriptです。
以下は記事内にコメント<-- trigger -->が存在するかどうかを判定する例です。
<-- trigger -->
//<![CDATA[ const post = document.querySelector(".post-body"); const convArray = Array.from(post.childNodes); const chk = convArray.some( (value) => value.nodeType === 8 && value.data.trim() === "trigger" ); //]]>
簡単な説明
要素を取得 const post = document.querySelector(".post-body");
子要素を配列に変換 const convArray = Array.from(post.childNodes);
配列にnodeTypeが8 かつ コメントtriggerが存在するかどうか判定 const chk = convArray.some( (value) => value.nodeType === 8 && value.data.trim() === "trigger" );
あればtrue、ないとfalseを返します。
true
false
コメントの前後のスペースはtrim()で削除してから判定しています。
trim()
&&を&&にすれば//<![CDATA[ //]]>がなくてもOK
&&
&&
//<![CDATA[
//]]>
記事内にコメント要素<!-- trigger -->があったらコードを実行する例
<!-- trigger -->
作成画面でHTMLビューを選択
<!-- trigger -->を入れる
Lorem JPsum | 自然な日本語ダミーテキストを自動生成
HTMLを編集します。必ずバックアップを取ってから作業してください。
記事内を検索するので<data:post.body/>以下に設置する必要があります。
<data:post.body/>
<script> //<![CDATA[ const post = document.querySelector(".post-body"); const convArray = Array.from(post.childNodes); const chk = convArray.some( (value) => value.nodeType === 8 && value.data.trim() === "trigger" ); //]]> if (chk == true) { 実行するコード } </script>
即時関数にした場合
<script> //<![CDATA[ (() => { const post = document.querySelector(".post-body"); const convArray = Array.from(post.childNodes); const chk = convArray.some( (value) => value.nodeType === 8 && value.data.trim() === "trigger" ); if (chk == false) return; //]]> 実行するコード })(); </script>
判定について。通常（？）は、以下のように既存のidやclassの値を利用するか、または判定用にidやclassを追加することが多いです。
記事内 <p id="trigger">リンゴ</p> <p class="trigger">オレンジ</p>
document.getElementByIdやdocument.querySelectorを使って
document.getElementById
document.querySelector
<script> const chk = document.getElementById("trigger"); if (chk != null) { 実行するコード } </script>
JavaScriptでHTMLコメント要素を取得する | EasyRamble
Node.nodeType - Web API | MDN
JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い - Qiita
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿