0

ユーザーが iframe コードをテキストエリア ボックスに貼り付けたときに、Vimeo または Youtube iframe のビデオ サムネイルを取得しようとしています。最初のステップは、iframe src 属性からビデオ ID 番号を取得することです。

貼り付け時に textarea.val() を取得する方法は知っていますが、結果は文字列であり、iframes src 属性の例http://player.vimeo.com/video/video_IDにアクセスしてから使用したいと思います

var n = srcFrame.lastIndexOf('/');
var result = srcFrame.substring(n + 1);

video_ID を取得する

.val() によって返された値に対して .attr などを使用する方法はありますか (おそらく、文字列をオブジェクトに変換する必要がありますか?)、またはアクロバティックな文字列操作を行う必要がありますか?

ユーザー入力の例は次のとおりです。

<iframe src="http://player.vimeo.com/video/THIS_NEEDED" width="500" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/65616948">Demo 01 2013</a> from <a href="http://vimeo.com/kr">KR</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
4

4 に答える 4

2

を使用prop('src')して src を取得できます。 で終わっていないことが確実な場合は/、分割し/て最後の値をポップできます。

var ID = $('iframe').prop('src').split('/').pop();

フィドル

編集：

あなたが持っているHTML文字列からiframeのsrcを取得するには、それを空の要素に追加してHTMLとして解析し、そこから移動します：

var holder = $('<div />').append($('textarea').val());
var ID = $('iframe', holder).prop('src').split('/').pop();

alert(ID);
于 2013-06-28T18:23:04.427 に答える
1

人々はあなたの質問を誤解していると思います。. . ページ上の実際の要素について話しているのではなく、ページのテキストエリアに貼り付けられた別のページからiframeの要素のソース コードですよね?iframe

私があなたを正しく読んでいるなら、はい、上記の回答には、文字列の属性にアクセスするために文字列をDOMオブジェクトに変換することを含むいくつかのオプションがありますが、単純に抽出できることを考えると、それは少し不格好に思えます文字列から必要な値。

適切な正規表現やその他の文字列操作を考え出すよりもコーディングする方が簡単かもしれませんが、それが最善の方法であるとは確信していません。繰り返しになりますが、個人的には、ページの一部として実際に使用されない DOM オブジェクトを作成することはあまり好きではありませんが、それは私だけかもしれません。:)

編集:正規表現/文字列操作ソリューションの追加:

srcこの正規表現は、文字列から属性をキャプチャします。

var srcPattern = new RegExp("(?:src=\")([^\"]+)");
  • (?:src=\")それに続く値のみが一致することを保証する「事前一致」です
  • ([^\"]+)src 属性の実際の URL と一致します。

textarea 入力からの値を照合します。

var textareaValue = $("#textareIDValue").val();
var srcMatch = textareaValue.match(srcPattern);

実際の値にアクセスするには、次を使用して、返された配列srcの 2 番目の項目を取得する必要があります。srcMatch

var srcValue = srcMatch[1];

返された配列 ( index 0) の最初の項目は完全に一致しますが (提供したサンプルでは)、URL (サンプルで. . .src="http://player.vimeo.com/video/THIS_NEEDEDによってキャプチャされた部分) だけが必要なので、2 番目の項目は配列 (インデックス):([^\"]+)http://player.vimeo.com/video/THIS_NEEDED1

値を取得したのでsrc、その最後の部分を取得する必要があるため、文字列split()関数を使用して URL のすべての「部分」を取得します。

var srcPieces = srcValue.split("/");

最後の項目のみが必要なため、使用length - 1してその配列から最後の項目を取得します。

var videoId = srcPieces[(srcPieces.length - 1)];

videoId探している値になります (THIS_NEEDEDサンプル内)。

注: 私はあなたがやりたいと思う多くのエラーチェックを省略しました (例えば、match関数が値を返したか、分割値の長さがsrc0 より大きいかなど)。手順ですが、これで良いスタートが切れ、すべての手順がより理解しやすくなります。

コメントなしの合計コード:

var srcPattern = new RegExp("(?:src=\")([^\"]+)");
var textareaValue = $("#textareIDValue").val();
var srcMatch = textareaValue.match(srcPattern);
var srcValue = srcMatch[1];
var srcPieces = srcValue.split("/");
var videoId = srcPieces[(srcPieces.length - 1)];
于 2013-06-28T18:41:10.833 に答える
1

attr が機能するはずです

$("iframe").attr("src");

あなたが望むものを手に入れるべきです。これは、ページに iframe が 1 つしかない場合に機能します。

于 2013-06-28T18:23:04.503 に答える
0

jQuery のみのソリューション:

var s = '<iframe src="http://player.vimeo.com/video/THIS_NEEDED" width="500" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/65616948">Demo 01 2013</a> from <a href="http://vimeo.com/kr">KR</a> on <a href="http://vimeo.com">Vimeo</a>.</p>'

var id = $(s).attr("src").substring($(s).attr("src").lastIndexOf('/')+1, $(s).attr("src").length)
于 2013-06-28T18:31:01.733 に答える