javascript replaceで検索時に出る侍エンジニア記事の注意点

javascript replaceで検索すると

2018年11月28日現在、javascript replaceで検索すると侍エンジニア記事が表示される。

閲覧したところ気になった点が数箇所あったので補足を追加した。

2018年11月28日現在の侍エンジニア記事内容

{n}が使用されていない

以下のような記述があったので引用。

var str = 'user-200, user-15, user-4505';
 
// 正規表現による指定
var result = str.replace(/user-\d\d,/, 'user-001,');
 
console.log( result );

この例では、文字列の中から「user-」に続いて2桁の数字を持つユーザー名を抽出して置換しています。

正規表現で「user-\d\d,」と指定することで、数値2桁と「,(カンマ)」を持つユーザー名を検索しています。

一般的には数値2桁の場合は\d\dではなく\d{2}と記述する。

この書き方だと4桁の場合は\d\d\d\dになってしまい可読性が悪い。

ダブルクオートを置換する方法について

以下のような記述があったので引用。

var str = 'あいう"え"お';
 
var r = str.replace(/"/g, '"');

この例では、文字列に「""」が含まれているのが分かりますね。

ダブルクオートを抽出するのは「/”/g」のように記述すれば良いのですが、第2引数の設定は「""」で囲んだ中に「'」を記述する必要があります。

文字列に含まれているのは正確には「""」ではなく「"」

あと「""」で囲んだ中に「'」を記述と書かれているのにサンプルだと「''」で囲んだ中に「"」になっている。

さらに補足だが「''」で囲んだ中に「"」ではなく「""」のなかに「\"」のようにバックスラッシュを入れる方法もある。

対象文字列にカンマを付与する方法について

var str = '12345678999999';
var tmp = str.replace(/^(\d+)(\d{3})/,"$1,$2");
    
while (str !== tmp) {
    str = tmp;
    tmp = str.replace(/^(\d+)(\d{3})/,"$1,$2");
}
 
console.log( str );

この例では、数字の文字列に対して( )でグループ化しつつ置換文字を「$1,$2」に設定しています。

さらに、while文で3桁ずつカンマが区切れなくなるまで繰り返しているのが分かります。

これにより実行結果のようなカンマ区切りが実現できるわけです!

3桁カンマ区切りは正規表現だけでできるのでwhileは使わない。

var str = '12345678999999';
var result = str.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
console.log(result);
// => 12,345,678,999,999

関数で「replace」を使うについて

var str = 'Jane, MIKE, BoB';
var result = str.replace( /[A-Z]/g, toLower );
 
function toLower( s ) {
  return s.toLowerCase();
}
console.log( result );

上記だと1文字ずつ無駄に処理してしまうので[A-Z]+と記述したほうが好ましい。

その他

  • str.join( ' ' )など括弧内の前後に無駄な空白が多い。
  • gのフラグを説明するならiのフラグも説明したほうが良い。
  • GoogleがMDNではなく侍エンジニア記事のほうを評価している理由が謎。