目次内のタグをそのまま使うのか削除するのか変数で制御 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

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


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

今回の目的

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

目次のテキスト内にタグがあった場合に、タグをそのまま使うのか・タグを削除するのかを変数で制御できるようにする

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

今までの機能実装方法

今までの実装方法では、目次として使用する見出し要素（h1～h6）のタグ内に別のタグがあった場合には、そのままそのタグも目次に使用されていました。

html_item += "<div id=\"auto-generated-index_content_h" + level + "\"><a href=\"#" + obj.childNodes[i].id + "\">" + obj.childNodes[i].innerHTML + "</a></div>\r\n";

そのため、場合によっては意図しない装飾が目次に反映されていました。

今回は、変数によって、見出し要素内のタグをそのまま残すのか、削除するのかを制御します。

改良後の機能実装方法

以下のように、変数(use_headline_htmlTag)によって、見出し要素内のタグをそのまま残すのか、削除するのかを制御できるようにしました。

    /* 見出し内のタグを削除して目次として使用するかどうか */
    var use_headline_htmlTag = false;

/* 見出しの内容 */
var headline = obj.childNodes[i].innerHTML;
if (!use_headline_htmlTag) {
    /* 見出し内の HTMLタグを使用しない場合には、HTML タグを削除する */
    headline = headline.replace(/<[^>]*>/g, "");
}


html_item += "<div id=\"auto-generated-index_content_h" + level + "\"><a href=\"#" + obj.childNodes[i].id + "\">" + headline + "</a></div>\r\n";

use_headline_htmlTagが true の場合には、見出し内の HTML タグはそのまま目次に使用されます。

use_headline_htmlTagが false の場合には、見出し内の HTMLタグは正規表現により空白に全て置換されます。


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

正規表現による文字列置換 String.replace(); - JavaScript スタイルシートサンプル集
http://javascript123.seesaa.net/article/141315325.html


次回は「目次タイトルの名前を変数で与える」機能追加を行います。

---

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