LoginSignup
2

More than 3 years have passed since last update.

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

Posted at

概要

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にまとめられてよかった。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2