目次の挿入先要素の id を正規表現により検出 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

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


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

今回の目的

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

目次の挿入先要素の id を正規表現により検出することで JavaScript コードの汎用性を高める

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

今までの機能実装方法

いままでの目次の挿入先要素を検出する機能は以下のコードによって実現していました。

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

if (divs[i].id.lastIndexOf("post-body-", 0) == 0) によって(*1)、DIV要素の id が Blogger の投稿を格納しているものだったら、そこの先頭に目次の HTML を挿入するようにしています。


*1
lastIndexOf で 第２引数に 0 を指定することにより、文字列の先頭が第１引数（ここでは、"post-body-"）と一致しているかどうかを判定しています。

String.lastIndexOf - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf

改良後の機能実装方法

今回の改良により、目次挿入先の要素の id の判定方式として、id の文字列の先頭とマッチするかという判定方式のみではなく、正規表現による多様な判定ができることを目指します。

そこで、RegExp.test を使用して、上のコードを次のように書き換えました。

    /* 
     目次の生成・挿入処理 
    */
    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 (divs[i].id.lastIndexOf("post-body-", 0) == 0)
によって、目次挿入先の要素の id を判定していましたが、改良後は
if (/^post-body-/.test(divs[i].id))
で判定しています。

この二つは意味的に等価であり、id の文字列の先頭が"post-body-"とマッチするかどうかを判定しています。


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

RegExp.test - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test


次回は「目次の挿入先要素の id を変数として与える」機能追加を行います。

---

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