JavaScriptでマッチ文字列全置換はどうするのがいい？ - あらびき日記

JavaScriptでマッチ文字列全置換はどうするのがいい？

JavaScriptのStringオブジェクトの文字列置換メソッドであるreplaceは最初にマッチした文字列しか置換しません．

※str.replace('hoge', 'fuga', 'g')のようにgオプションを指定する方法はFirefoxのみのようです

「JavaScript 文字列 置換 全て」とかでググるとこちらのページが真っ先にヒットします．

このページによれば全置換する方法は以下の2つだとか．

1. 検索文字列を正規表現にしてグローバルマッチによる置換

var value="Hello World";
value.replace(/o/g, "*");

2. 検索文字列でsplitして置換文字列でjoinする

var value="Hello World";
value.split("o").join("*");

ふむふむ．っで，どっちが良いの？

どちらでも目的が達成できるのであれば，どうせなら高速な方を採用したいもの．

PHPではパフォーマンスを考慮すると，正規表現を使わなくてもよいものは使わないのが鉄則．

となると2が有力か？いや，でもsplitしてjoinってどうなの？？

そんなわけでどちらが良いのか検証してみました．

-- 追記 2014-03-01 --

このご時世、jsPerf という便利なサービスがあるのでそちらでもざっくり比較してみました。

http://jsperf.com/replace-global-vs-split-join

--------------------

検証コード

var str1 = '"hoge"', str2 = '"hoge" "fuga" "foo" "bar"';

globalmatch(str1);    
splitjoin(str1);      // (2)

globalmatch(str2);    
splitjoin(str2);      // (4)

function globalmatch(str){
    alert(str.replace(/"/g, '\\"'));
    date = new Date;
    for (var i = 0; i < 100000; i++) str.replace(/"/g, '\\"');
    alert(new Date - date);
}

function splitjoin(str){
    alert(str.split('"').join('\\"'));
    date = new Date;
    for (var i = 0; i < 100000; i++) str.split('"').join('\\"');
    alert(new Date - date);
}

以下のURLにアクセスすると実行されます．

http://abicky.site90.com/test/replace.html

結果(ms)

そんなわけで，Operaを除いては正規表現のグローバルマッチを使った方がそこそこ速いみたいです．

検証で使った7ブラウザ合計のシェアとOperaのシェアを考えると正規表現のグローバルマッチで全置換すべきですかね．

Permalink | コメント(0) | トラックバック(0) | 18:05