日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月12日月曜日

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

序章

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


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


今回の目的

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


目次の挿入先要素の 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 で 第2引数に 0 を指定することにより、文字列の先頭が第1引数(ここでは、"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で自動的に付与する」シリーズ 記事一覧へ




関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...