【JavaScript】str.replace に引数を渡したい

Question

前提・実現したいこと

replaceに引数を渡したいです

発生している問題・エラーメッセージ

以下のソースコードは、例えば

'mother'=>1
の部分を

<span class="mother">'mother'</span>=>1
のようにしています。

つまり const obj に一致したものを span で囲むために replace を使っている状況です。

こうして span がついた次の状態ですが、これにさらに
<span class="mother">'mother'</span>=>1

次のようにクラスを追加したいので、その方法をお尋ねしたいと思います。
<span class="info_base mother">'mother'</span>=>1

該当のソースコード

<p>
Your mother is very young.<br>

[
['mother'=>1,'color'=>'red','new_color'=>'pink','new_address'=>'tokyo'],
['mother'=>2,'color'=>'yellow','new_color'=>'purple','new_address'=>'florida'],
]
</p>

let p = $('p').text();

const obj = {
	info_base: ["'mother'","'color'"],
	info_new : ["'new_color'","'new_address'"]
};
$.each(obj, function(key, cols) {
	cols.forEach(col => {
		p = p.replace(new RegExp(col,'g'), replacer);
	}); 
});	

$('p').html( p );

function replacer( match ) {
	const class_name = match.slice(1).slice(0,-1); // 「'」を除いてクラス名に
	return `<span class="${class_name}">${match}</span>`;
}

試したこと

obj のキーをクラスに付与したいということなので、以下のように replacer に key という引数を渡せばできると踏んだのですができませんでした。

$.each(obj, function(key, cols) {
    cols.forEach(col => {
        // p = p.replace(new RegExp(col), replacer);
        // ↓ 変更
        p = p.replace(new RegExp(col), replacer(key) );
    }); 
});    

$('p').html( p );

function replacer( match ) {
    const class_name = match.slice(1).slice(0,-1); // 「'」を除いてクラス名に
    // return `<span class="${class_name}">${match}</span>`;
    // ↓ 変更
    return `<span class="${key} ${class_name}">${match}</span>`;
}

調べてみますと replace の第二引数( 上記replacer )は match や offset など使える引数が決まっているみたい（？）でして、replacer(key) という書き方ができないのかもしれません。
ですけど、それならばどうずればできるのか全くわからなくなってしまいました。

補足情報

正規表現にgのフラグを追加しました

Answer 1

とりあえずこんな感じにしました。

let p = $('p').text();

const obj = {
    info_base: ["'mother'","'color'"],
    info_new : ["'new_color'","'new_address'"]
};
$.each(obj, function(key, cols) {
    cols.forEach(col => {
        p = p.replace(new RegExp(col,'g'), replacer(key));
    }); 
});    

$('p').html( p );

function replacer(key) {
    return (match) => {
        const class_name = match.slice(1).slice(0,-1); // 「'」を除いてクラス名に
        return `<span class="${key} ${class_name}">${match}</span>`;
    };
}

Comments

[ajinomoto]

どうもありがとうございます。求めていた処理でした。一つお伺いしたいのですが、下記で上はできず下ができますよね。

function replacer(key) {
const class_name = match.slice(1).slice(0,-1);
return `<span class="${key} ${class_name}">${match}</span>`;
}

function replacer(key) {
return (match) => {
const class_name = match.slice(1).slice(0,-1);
return `<span class="${key} ${class_name}">${match}</span>`;
};
}

どうして下のように return (match) => {} で囲むとできるようになるのでしょうか？

そして引数はkeyしか渡していないのに、このmatchはどこから呼ばれているのでしょうか？

[satokei]

String.replace()の第2引数には、文字列 または、関数を渡すことができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

◯文字列：渡された文字列で置換する　← 1つ目の書き方（文字列を返している）
◯関数：マッチ結果を関数に渡して置換する　← 2つ目の書き方（関数を返している）

つまり回答としては、

> どうして下のように return (match) => {} で囲むとできるようになるのでしょうか？
　→ 関数を返しているから

> そして引数はkeyしか渡していないのに、このmatchはどこから呼ばれているのでしょうか？
　→ String.replace()が、パターンに一致する文字列を見つけるたびに呼んでいる

[ajinomoto]

なるほど。
p = p.replace(new RegExp(col,'g'), replacer(key));
のreplacerには、replacerの実行結果が代入されるんですね。
replacerが関数なので、常に関数を入れているつもりでした。
わかった気がします。どうもありがとうございました。

Answer 2

すべて置換するならgフラグを指定してください

Comments

[ajinomoto]

なるほどありがとうございます。