Javascriptでmatch→replaceを成功させるために

概要

javascriptで文字列をmatchして抜き出し→replaceで置換するだけの処理なのにnullとか出て思いっきりハマった(3-4時間飛んだ)ので次からはハマらないために頑張りたい。

なぜnullになるのか

今回初めて知ったけど、matchの結果はArray型で帰ってきている。

そしてreplaceはString型なので、型がかみ合わなくてnullになってしまう。

防ぐためには

toString()する。
書き方はjQueryだけど、素のJSでも一緒

var hoge = $('fuga').toString();

汎用化したい

簡単にfunction書いて汎用化してみた。

function matchReplace(selector, pattern, before, after){
  const matched = selector.match(pattern).toString();
  const replaced = matched.replace(before, after);
  return replaced;
}

例

HTML

index.html

<p id="hoge">私はDAFUです。</p>

JS

script.js

$('#hoge').text(matchReplace($('#hoge'),$('#hoge').text(), /DAFU/, 'ダフ'));

表示

私はダフです。

引数について

当然引数が正規表現でもよい。

引数	説明	例
selector	ターゲット要素のセレクタ	document.getElementById(id)
pattern	matchでの検索パターン	/正規表現/
before	replaceの置換前の文字列	'置換前'
after	replaceの置換後の文字列	'置換後'

まとめ

正直今まで型を気にしたことがなかったのだが、今回痛い目にあったのでちゃんと注意しようと思った。

また、割とmatch→replaceの処理は個人的に使う機会が多そうなのでfunctionにまとめられてよかった。