replace関数を使ってYouTubeの埋め込みコードの置換をしたい

Question

前提・実現したいこと

replace関数を使ってYouTubeの埋め込みコードの置換をしたい
https://www.youtube.com/watch?v=IDのIDをhttps://www.youtube.com/embed/IDという形に置換したい
URLが複数ある場合も全て置換したいのですがどのようにマッチ式を書いたらいいのかわかりらずにいます
replace関数で実現可能でしょうか？

該当のソースコード

youtube_url = "https://www.youtube.com/watch?v=ID";
youtube_url = youtube_url.replace(/https://www.youtube.com/watch?v=*/gi, 'https://www.youtube.com/embed/$1');

Answer 1

replace関数でwatch?v=(ID)を/embed/(ID)にしたいということですよね。
URLが複数ある場合は、それぞれ変換前後をfor文で繰り返すのが分かりやすいと思いますが、

他には、リストになっていると思いますので、
URLをjoin([適当な文字列])で一度一つの文字列にして、replaceして、split([適当な文字列])
とすれば一括で置換できると思います。

url_list = ["https://www.youtube.com/watch?v=00000",
            "https://www.youtube.com/watch?v=00111"];
url_join_ = url_list.join("HOGEHOGE");

url_join_replace = url_join_.replace(/watch?v=/gi, 'embed/');

url_list_replace = url_join_replace.split("HOGEHOGE");

ためしてないので、うまくいくかわかりませんが、ご参考までに。

回答修正↓

url_join_replace = url_join_.replace(/watch?v=/gi, 'embed/');

Comments

[memetu]

回答ありがとうございます
提示いただいたサンプルをそのまま動かしてみましたが、置換されていませんでした

[memetu]

それと配列ではなくて、文字列に複数あった場合という形を望んでおります
この場合はやり方がわかってきますか？

url_list = "https://www.youtube.com/watch?v=00000 https://www.youtube.com/watch?v=00111";
url_join_ = url_list.join("HOGEHOGE");

url_join_replace = url_join_.replace(/watch?v=/gi, 'embed/');

url_list_replace = url_join_replace.split("HOGEHOGE");

[Matsui_hero]

あ、間違えていました。?vの?が正規表現になっているので、replaceの中の?vを?vと、文字列として扱ってあげないといけません。動作確認しました。

＞url_list = "https://www.youtube.com/watch?v=00000 https://www.youtube.com/watch?v=00111";
この場合は、joinをする必要がないので、split(' ')と、スペースで分割すれば所望のものが得られると思います。

[Matsui_hero]

もちろん、URLを分ける必要がないなら、splitしなくてもいいですよ。

[Matsui_hero]

改めて回答をまとめると、
youtube_url = youtube_url.replace(/watch?v=/gi, 'embed/');
です！
連投すみません。。。

[memetu]

回答ありがとうございます
無事動作確認できました

もう一ついいでしょうか
<script>
window.onload=function(){
url_list = "https://www.youtube.com/watch?v=00000 https://www.youtube.com/watch?v=00111";
url_join_replace = url_list.replace(/watch?v=/gi, 'embed/');
alert(url_join_replace);
}
</script>

これを実行した場合、https://www.youtube.com/embed/00000 https://www.youtube.com/embed/00111が出力されますが、
この出力結果を、<iframe src="https://www.youtube.com/embed/00000"></iframe> <iframe src="https://www.youtube.com/embed/00111"></iframe>のようにしたい場合、どのようにやるのでしょうか？

[Matsui_hero]

alertする代わりに、サムネか何かをiframタグで表示したいということでしょうか。

あまり詳しいほうではないので自信がないですが、
このURLを置換して置換したURLを返す関数に加えて、
URLをiframeの中のsrcに入れる関数を分けて作って両方実行する動作を実装すればできるのではないかなと思います。

一応、別の質問ですので、別で質問を立てたほうがいいと思います。
そのほうが私以外にも詳しい人に教えてもらえると思いますので！（ポイントにもなりますし。。。）