【jQuery】splitで正規表現を使う＆配列から取り出す

こんにちは。E-kan株式会社の岡田です。

既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間地味に苦労したので備忘録パート２。
ざっくり必要なところだけ抜き出すとこんな感じです。

変更前html

<h1>
  <strong>サンプルページ</strong>で可変文言の<br>テストをします
</h1>

以下の条件のある「可変文言」の部分をstrongで囲ってほしい。

• テストページはcmsで管理されており複数存在する
• 「可変文言」の部分はページによってテキストが異なる

出来上がりは、こう。

変更後html

<h1>
  <strong>サンプルページ</strong>で<strong>可変文言</strong>の<br>テストをします
</h1>

jQuery

//h1のテキストを「で」と「の」で区切り、配列２個めの要素を取り出す
var txt = $('h1').text().split(/[での]/)[1];

//取り出した要素を指定のタグで囲む
var html = '<strong>'+txt+'</strong>';

//h1の中身をhtml構造ごと取り出す
var h1 = $('h1').html();

//取り出したh1の該当文字列を、タグで囲んだ文字列に入れ替え
var result = h1.replace(txt, html);

//文字列を入れ替えたh1と元のh１を置き換える
$('h1').html(result);

最初、一番初めの配列から取り出すところの指定を[2]にしてしまい「あれ？上手くいかない」とか思いましたが、配列は0からカウントされるんでしたね。
滅多に使わないとすぐ忘れてしまう鳥頭なので、備忘録はとても大事。