質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

466閲覧

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

ajinomoto

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/10 16:02

編集2020/05/10 17:22

前提・実現したいこと

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

該当のソースコード

html

1<p> 2Your mother is very young.<br> 3 4[ 5['mother'=>1,'color'=>'red','new_color'=>'pink','new_address'=>'tokyo'], 6['mother'=>2,'color'=>'yellow','new_color'=>'purple','new_address'=>'florida'], 7] 8</p>

js

1let p = $('p').text(); 2 3const obj = { 4 info_base: ["'mother'","'color'"], 5 info_new : ["'new_color'","'new_address'"] 6}; 7$.each(obj, function(key, cols) { 8 cols.forEach(col => { 9 p = p.replace(new RegExp(col,'g'), replacer); 10 }); 11}); 12 13$('p').html( p ); 14 15function replacer( match ) { 16 const class_name = match.slice(1).slice(0,-1); // 「'」を除いてクラス名に 17 return `<span class="${class_name}">${match}</span>`; 18} 19

試したこと

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

js

1$.each(obj, function(key, cols) { 2 cols.forEach(col => { 3 // p = p.replace(new RegExp(col), replacer); 4 // ↓ 変更 5 p = p.replace(new RegExp(col), replacer(key) ); 6 }); 7}); 8 9$('p').html( p ); 10 11function replacer( match ) { 12 const class_name = match.slice(1).slice(0,-1); // 「'」を除いてクラス名に 13 // return `<span class="${class_name}">${match}</span>`; 14 // ↓ 変更 15 return `<span class="${key} ${class_name}">${match}</span>`; 16} 17

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

補足情報

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

JavaScript

1let p = $('p').text(); 2 3const obj = { 4 info_base: ["'mother'","'color'"], 5 info_new : ["'new_color'","'new_address'"] 6}; 7$.each(obj, function(key, cols) { 8 cols.forEach(col => { 9 p = p.replace(new RegExp(col,'g'), replacer(key)); 10 }); 11}); 12 13$('p').html( p ); 14 15function replacer(key) { 16 return (match) => { 17 const class_name = match.slice(1).slice(0,-1); // 「'」を除いてクラス名に 18 return `<span class="${key} ${class_name}">${match}</span>`; 19 }; 20}

投稿2020/05/10 20:15

satokei

総合スコア1168

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ajinomoto

2020/05/11 05:05

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

2020/05/11 05:50 編集

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

2020/05/11 06:06

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

0

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

投稿2020/05/10 16:21

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ajinomoto

2020/05/10 16:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問