目次の挿入先要素の id を変数として与える - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。（2nd シリーズ）
記事一覧は「Bloggerの記事に目次をJavaScriptで自動的に付与する - サポートページ」よりどうぞ。


2nd シリーズでは、1st シリーズで作成した目次機能に基本的な機能追加を行います。

今回の目的

2nd シリーズ第２回目の今回は以下の機能を実装します。

目次の挿入先要素の id を変数として与えることで、様々なWebページ作成/Blogサービスにこの目次生成機能を導入できるようにする

今回の機能実装のポイント

今までの機能実装方法

前回の改良により、目次の挿入先は次のコードにより決定されるようになりました。

    /* 
     目次の生成・挿入処理 
    */
    function generateIndex() {
        /* 投稿本文が格納されている div 要素を発見し、目次を挿入する */
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if (/^post-body-/.test(divs[i].id)) {     /* 先頭一致 */
                /* 投稿本文が格納されている div 要素発見時の処理 */
                generateIndexForObj(divs[i]);
                break;
            }
        }
    }

if (/^post-body-/.test(divs[i].id)) の部分で、目次挿入先の要素の id かどうかを判定しています。

今回は、/^post-body-/ の部分を変数とし、自由に変えられるようにします。

改良後の機能実装方法

メソッド外に目次挿入先要素の id の正規表現用の変数を作成して、その変数を使って処理するように上のコードを改良しました。

    /* 目次挿入先要素の id の正規表現 */
    var regExp_id_obj_insert_index = new RegExp("^post-body-");

    /* 
     目次の生成・挿入処理 
    */
    function generateIndex() {
        /* 投稿本文が格納されている div 要素を発見し、目次を挿入する */
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if (regExp_id_obj_insert_index.test(divs[i].id)) {
                /* 投稿本文が格納されている div 要素発見時の処理 */
                generateIndexForObj(divs[i]);
                break;
            }
        }
    }

正規表現 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions


これで、目次挿入先要素の id の正規表現用の変数を修正することで、Blogger 以外のブログや通常の Web ページなど、いろいろなものに対して目次を挿入することができます。


次回は「目次内のタグをそのまま使うのか削除するのか変数で制御」機能追加を行います。

---

「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ　記事一覧へ