Riot.js使用によるiframe表示による相違

下記のコードでiframeにユーチューブを表示したく
（1）サイトアドレスを加工してiframeのsrcに代入した場合
（2）サイトアドレスを加工したのをiframeのsrcに直接代入した場合
どちらも同じアドレスになりますが、
（1）は表示されない、（2）は表示されます。
（1）をどのように加工すれば宜しいでしょうか。
どなたか、御指示下さい。

参考サイト：https://qiita.com/nnahito/items/454e10559313e91198a9
https://bl.ocks.org/frogcat/ed45f9dd07ba1867de6602329e6cfdff

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>ini hmlt</title>
6  <script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot+compiler.min.js"></script>
7<style type="text/css">
8</style>
9</head>
10<body>
11  <!--定義タグ-->
12  <mytag></mytag>
13
14  <!--myboxタグをRiotで定義-->
15  <script type="riot/tag">
16  <mytag>
17    <!-- mytagの内容 -->
18    <iframe width="400" height="225" src="{src}" frameborder="0" allowfullscreen></iframe>
19    <iframe width="400" height="225" src="https://www.youtube.com/embed/umKIDwxkuYg?rel=0" frameborder="0" allowfullscreen></iframe>
20  </mytag>
21 </script>
22
23 <script type="text/javascript">
24    //console.log("");
25    //alert (""); 
26  function GetEmbed_url(tmp){
27    var result = [];
28    tmp = tmp.replace(/　/g,' ');
29    var result = tmp.split(' ');
30    tmp = result[3];
31    //alert (tmp);
32    console.log(tmp.replace("src=","" ));
33    return tmp.replace("src=", "");
34  }
35    var hmlt = '<iframe width="400" height="225" src="https://www.youtube.com/embed/5eOSSBM5dXw" frameborder="0" allowfullscreen></iframe>';
36    this.src = GetEmbed_url(hmlt);　　------------（1）×
37    alert (this.src);
38    //this.src = "https://www.youtube.com/embed/5eOSSBM5dXw";　------------（2）〇
39</script>
40
41<script type="text/javascript">   
42  window.onload = function() {
43    riot.mount('*');
44  }
45</script> 
46
47</body>
48</html>

行動規範の内容に同意します

回答1件

ベストアンサー

"が残っているのでは。

投稿2020/05/01 07:01

kei344

総合スコア69458

shin0859

2020/05/01 07:10

回答有難うございます（1）でサイトアドレスの前後に”は有りますただ（2）も同じに付いています。何か違うのでしょうか？

kei344

2020/05/01 07:11

'"https://www.youtube.com/embed/5eOSSBM5dXw"' 'https://www.youtube.com/embed/5eOSSBM5dXw' この違い。

kei344

2020/05/01 07:12

うわ、teratailのコメントのエスケープおかしい。

kei344

2020/05/01 07:12

'"text"' 'text' この違い。

shin0859

2020/05/01 07:23

src='{src}'　ｏｒ　"'" + GetEmbed_url(hmlt) + "'"　でも解決しないですが...

kei344

2020/05/01 07:25

たぶん this.src に両端「"」付きのURLを渡しているのが問題なので、削除してください。

kei344

2020/05/01 07:26

GetEmbed_urlの中で置換すればいいです。

shin0859

2020/05/01 07:42

すいません、御指示の様にいろいろやって見ましたが表示はされませんでした。申し訳無いですが、出来ましたら掲載のコードで実行して頂いて訂正箇所を教えて頂ければ嬉しいのですが...

kei344

2020/05/01 07:47

https://jsfiddle.net/0ku36va9/ 違いがわかりませんか？それとも置換方法がわかりませんか？（置換はご自身のコードでも使っていますよね？） https://jsfiddle.net/0ku36va9/1/

shin0859

2020/05/01 07:55

kei344様たぶん this.src に両端「"」付きのURLを渡しているのが問題なので、削除してくださいすいません　この内容で表示されました。有難うございました疑問が（2）はダブルクォーテーションが付いているのにokなのは？とにかく、出来ましたので　有難うございました

kei344

2020/05/01 07:58

（2）はただの文字列です。文字列の中に「"」という文字が入っているのとは意味が違います。一個目のリンクを見てそれでもわかりませんか？ '"text"' 'text' この違い。

shin0859

2020/05/01 08:11

何度もすいません文字列は表示のためにダブルクォーテーションが必要でメモリー上はダブルクォーテーション無し　という考え方で理解してよろしいでしょうか。ご意見が無ければ、しばらくして閉じます

kei344

2020/05/01 08:21

メモリーというか変数です。変数と文字列の扱いについては基本の部分なので、入門書等を読み直すことをお勧めします。【文法とデータ型 - JavaScript | MDN】 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#String_literals

shin0859

2020/05/01 08:42

色々と有難うございます。この辺は厳密に理解していなかったので、この様なエラーに陥ってしまいました。ご紹介のサイトで知識を得たいと思います。これで解決とします。有難うございました

行動規範の内容に同意します