以前の記事でJavascriptのreplace関数を深掘りしてみたところ、正規表現を利用することで複数の置換が可能になることが分かったのですが、これをさらに便利に使ってみたいと思い、関数と連動させるようにしてみました。
やりたいこと
これまで置換対象の文字列は固定だったのですが、複数ある場合に、置換対象文字列も複数にできないかと実験してみました。
例えば、"a1a2a3"という文字列で/a[0-9]/という正規表現にした場合、3パターンの結果が返ってきます。
これを別々の文字列で置き換えたい時などに、stringのみの置換対象であれば、固定値での置換ですが、任意の置換が出来ることで、かなり柔軟な対応が可能になります。
基本形
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="str">abc1defg|abc2defg|abc3defg</div>
<script src="replace.js"></script>
</body>
</html>
(function(){
var str = document.getElementById("str").innerHTML;
console.log(str);
)();
上記の結果は
abc1defg|abc2defg|abc3defg
返り値を関数で行う方法
replace.js
(function(){
var str = document.getElementById("str").innerHTML;
str = str.replace(/abc[0-9]/g,rep);
console.log("res : "+str);
function rep(str){
if(str=="abc1"){
return "A";
}
else if(str=="abc2"){
return "B";
}
else if(str=="abc3"){
return "C";
}
return "--";
}
})();
結果
res :
Adefg|Bdefg|Cdefg
rep関数のstrには、replaceで置換される$1が入ってくるらしい。
関数の受け取り値を検証
(function(){
var str = document.getElementById("str").innerHTML;
str = str.replace(/abc[0-9]/g,rep);
console.log("res : "+str);
function rep(str,a,b,c,d){
console.log("return : "+str+" : "+a+" : "+b+" : "+c+" : "+d);
return "--";
}
})();
結果
return : abc1 : 1 :
abc1defg|abc2defg|abc3defg
: undefined : undefined
--
replace.js:31 return : abc2 : 10 :
abc1defg|abc2defg|abc3defg
: undefined : undefined
--
replace.js:31 return : abc3 : 19 :
abc1defg|abc2defg|abc3defg
: undefined : undefined
replace.js:28 res :
--
--defg|--defg|--defg
どうやら、以下の様な結果になることが分かった。
受取値1のaには、「replaceの置換される値」
受取値2のaには、「置換値の初期アドレス（初回文字のバイト数）」
受取値3のaには、対象文字列の全体
これをうまく利用すると、もっと便利に返り値のコントロールができるかもしれない。
サンプル
この機能を利用すると、ページ内のリンク一覧を置換する場合に、対象ドメインに応じて変換値に値を埋め込むことも可能になる。
また、文字バイトの置換を行う場合などの場合に、一定の値しか置換できないのではなく、文字コードに応じてレスポンスを変更できるので、こういった関数は必須かもしれない。
