テンプレートのテキストを一部差し替えて使いまわす - ページ遷移のポップアップテキストを作成する

先日、外部リンクをクリックした際ポップアップにテキストを表示する、という案件を対応した。
遷移先は別ドメインである旨を表示して、遷移する or 留まるリンクをクリックさせるというものだ。
免責事項の表示や、離脱防止などによく使われている。
すでにモーダルプラグインを使用していたので、それらを組み合わせて使おうと思ったが、テンプレ文を何度も書くのが好ましくないと思いjavaScriptでモーダルの表示先htmlを処理させることにした。

仕様

• 別ドメインに遷移するリンクをクリックした際にポップアップテキストの表示
• テキストはテンプレ文+遷移先のリンク+キャンセルするリンク

やりたいこと

• テンプレートのリンクに、クリック先のurlを差し替えて使いまわしたい
• 既存のモーダルプラグインへの繋ぎこみ

aタグのhrefでターゲットを指定するタイプのモーダルプラグインを想定。
とりあえず特定のdivにブチ込むところまで。

HTML

<a href="#dest00" id="test00" data-href="http://test00" class="js-dest">リンク00</a>
<a href="#dest01" id="test01" data-href="http://test01" class="js-dest">リンク01</a>

<!-- modalの表示先 -->
<div id="dest00"></div>
<div id="dest01"></div>

JavaScript

temp = '遷移先リンクは<a href=\"\[get_item1\]\" target=\"_blank\">\[get_item1\]<\/a>です、キャンセルする場合のリンク<a href=\"\[get_item2\]\">\[get_item2\]<\/a>';
var back = window.location.href;

$('.js-dest').each(function(){
  var dest = $(this).attr('data-href');//遷移先
  var tgt = $(this).attr('href');//テキスト表示先
  var new_temp = temp.replace('\[get_item1\]',dest).replace('\[get_item2\]',back);//テンプレートから差し替えたテキスト
  $(function(){
    $(tgt).append(new_temp);
  });
});

ひとまず想定通りDOMが生成されたのでOK。
これ、そのまま外部リンクをクリックしてもモーダルの表示はそのままなので、そこからプラグインに用意されていたコールバックやイベントで味付けして実装した。
キャンセルでただ閉じるのでなく再度そのページを読み込ませたのは案件の仕様の名残。
自由度の高い案件であればこれぐらいで良さそうだけど、ガチガチの案件ならばJSONとかでもっとちゃんと処理する必要がありそう。
ひとまず.replaceが複数回使用できるの知らなかったので良い勉強になった。