JavaScriptのreplaceで、連続したmatchを効かせたいです

Question

###実現したいこと
テキストのタグを#タグとしたいです。

この条件がございまして、実は全てクリアできています。
・前にシャープをつける
・後ろにスペースをつける
・前がpatternと.match()しなければ前にスペースをつける
・先頭なら前のスペースなし、末尾なら後ろのスペースなし
・タグが連続したあ間のスペースは１つ
・元からタグならそのまま

###問題
昨日から取り組んでいる内容で、教えて頂いたり改変したりでなんとか上の条件はクリアできました。

以下のようにstrが
食パンあとジャムパンあとごまあんぱんのときは
#食パン あと #ジャムパン あと #ごまあんぱんとなり理想的なのですが、

しかしstrが
食パンジャムパンごまあんぱんのときは
#食パン ジャムパン #ごまあんぱんとなってしまいます。

ジャムパンが抜けてしまうのです。

###コード
こちらは昨日yambejp様から頂戴したコードについて、is_tag()やescapeRegExp()という関数を加えたものになります。

実行して頂くとジャムパンが抜けてしまうことがご覧いただけるかと思います。

var ARR = [
  {name:'食パン',id:1},
  {name:'あんぱん',id:2},
  {name:'ごまあんぱん',id:3},
  {name:'食パン(はちみつ味)',id:4},
  {name:'ジャムパン',id:5}
];

var str = "食パンジャムパンごまあんぱん";
console.log( get(str) ); // ジャムパンが抜けてしまう

function get( str ){
	
  var pattern = ["","。","、","!","！"];
  
  var reg = new RegExp("(^|.)("+ARR.map(x=>escapeRegExp(x.name)).sort((x,y)=>x.length<y.length).join('|')+")(.|$)","g");

  var res = str.replace(
  
  	reg,x=>( ( r=x.match(new RegExp(reg.source)) ) ) &&
    
    	// 元からタグの場合はそのまま
    	is_tag(r[1],r[3]) ? x :
    	
    	// タグ化する
    	r[1]
    	+ ( pattern.indexOf(r[1])>=0 ? "" : " " )
        + "#"
        + r[2]
        + ( r[3]=="" ? "" : " " )
        + r[3]

  );

  return res;

  // 前がシャープ、後がスペース|patternならばタグ
  function is_tag( before, after ){
    var before_match = before.match(/^[#＃]$/);
    var after_match = after.match(/^\s$/) || after.match(pattern);
    return ( before_match && after_match ) ? true : false;
  }  
}

// 正規表現をエスケープ
function escapeRegExp(string) {
	return string.replace(/[\^$.*+?()[]{}|]/g, '\$&');
}

###試したこと
ジャムパンが受け取れない原因をさぐるためにxを出力してみましたら、やはりこの結果がおかしかったです。

  var res = str.replace(
  	reg,x=>( ( r=x.match(new RegExp(reg.source)) ) ) &&
        console.log('x=「'+x+'」') 
  );

以下の結果となり、ジャムパンが受け取れないのはやはりxがおかしいからだとわかりましたが…しかし、いつどこでジャムパンが消えてしまうのか、どうしてもわかりません。

x=「食パンジ」
x=「ンごまあんぱん」 

さらに以下でreg.sourceやstrもみましたが、それらにはジャムパンがありました。いつxからジャムパンが消えてしまうのか、さっぱりです。

  var res = str.replace(
  	reg,x=>( ( r=x.match(new RegExp(reg.source)) ) ) &&
        console.log('x=「'+x+'」') 
        +console.log('str=「'+str+'」') 
        +console.log('reg.source=「'+JSON.stringify(reg.source)+'」') 
  );

どうすればジャムパンについても実現できますでしょうか。

###補足情報（FW/ツールのバージョンなど）

特にバージョン情報は関係ないかと思いますが、もし解決策にjQueryをお使いになる場合がございましたら、最新の3.4での方法でお願いできましたら幸いです。

何卒、宜しくお願いいたします。

Answer 1

乗りかかった船なので一応以下で

• codepen

Comments

[mezamashiTV]

えなななんですかこれ…好きに入力できるように作ってくださったんですか…信じられません（泣）本当にありがとうございます。
連日貴重なお時間を割いて下さいまして心より感謝申し上げます。

[yambejp]

重要なのは
・まずはマッチした文字を抜き出すこと
・次に前後の文字を拾っておくこと
これができれば8割完成しています。

たぶんもっと効率的な書き方があるのですが
効率性をあげると拡張性が犠牲になるので
落とし所が難しいですよね・・・

あとなに仕様追加が必要なら適当に質問いれておいてください

[mezamashiTV]

なるほど。効率と拡張性で悩むケースなどかつてありませんでした（動いたからヨシな姿勢でした）が、今回その重要性を目の当たりにできるまたとない機会となりました。

正規表現のエスケープにハイフンを追加してくださったり等こまかい点までご配慮頂きまして誠にありがとうございます。おかげ様でやっとこの作業から抜け出せました。>_ _)>

Answer 2

前提が共有できていないかもですが、これではダメなのですか？

"食パンあとジャムパンあとごまあんぱん".replace(/(食パン|あんぱん|ごまあんぱん|食パン(はちみつ味)|ジャムパン)/g," #$& ").trim();
//"#食パン あと #ジャムパン あと #ごまあんぱん"

"食パンジャムパンごまあんぱん";.replace(/(食パン|あんぱん|ごまあんぱん|食パン(はちみつ味)|ジャムパン)/g," #$& ").trim();
//"#食パン  #ジャムパン  #ごまあんぱん"

再挑戦を追記

s.replace(
  /(.?)(食パン|あんぱん|ごまあんぱん|食パン(はちみつ味)|ジャムパン)/g,
  (match,p1,p2) =>
    match === p2          ? ` #${match} ` : 
    p1.match(/[。、!！]/) ? `${p1}#${p2} ` :
    p1 !== "#"            ? `${p1} #${p2} ` :
                             match
).trim();

Comments

[mezamashiTV]

ありがとうございます。シンプルでいいですね。
そちらですと「// 元からタグの場合はそのまま」の処理や、「pattern」についての処理もできませんので、質問のように少し複雑な流れになっています。

[Lhankor_Mhy]

ああ、なるほどですね。

[Lhankor_Mhy]

もう一度チャレンジしてみました。

[Lhankor_Mhy]

ああ、「タグが連続したあ間のスペースは１つ」がダメかあ……
置換しちゃうのもダメか。よく考えると、元文字列の末尾スペースを生かすなら、トリムもダメなのか。
ふむむ。

[yambejp]

結局仕様が増えてくると冗長に処理する方が早かったりするんですよねー

[mezamashiTV]

再挑戦もありがとうございます。replaceの戻り値であるp1などを使うアプローチはいいですね。
今回もまたyambejp様が解決してくださいましたが、Lhankor_Mhy様のコードも勉強になりました。

[Lhankor_Mhy]

回答するというよりも、パズル的に楽しませていただきました。

>結局仕様が増えてくると冗長に処理する方が早かったりするんですよねー

しかりしかり。

Answer 3

ジャムパンが抜けてしまう

ARR の name に 半角の (,) が利用されているためです。
正規表現パターンにおいてグループ化するための機能を持ちますので、エスケープが必要になります。

let quotemeta = str => str.replace(/\W/g, '\$&');

---

追記）
エスケープはできていましたね。申し訳ありません。

"(^|.)(" + パターン + ")(.|$)" のパターンに対して
食パンジャムパンごまあんぱん とパンの名称が連続するのが原因です。

以下のようにマッチしています。

1. 「食パンジャムパンごまあんぱん」を評価し ^+"食パン"+. にマッチ

（ジャムパンのジにかかるため、その次の ャ からマッチ処理されます）
2. 「ャムパンごまあんぱん」を評価し .+"ごまあんぱん"+$ にマッチ

Comments

[mezamashiTV]

ありがとうございます。ご指摘の半角かっこはの部分は以下escapeRegExp()でエスケープしていると思うのですが、

ARR.map(x=>escapeRegExp(x.name))

これでは不足なのでしょうか？

[AkitoshiManabe]

追記しました。原因についてのみ言及し、yambejp さんの codepen を参考にしてみてください。