0

当用户将 iframe 代码粘贴到 textarea 框中时，我正在尝试获取 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

attr 应该工作

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

应该得到你想要的。如果页面上只有一个 iframe，这将起作用。

于 2013-06-28T18:23:04.503 回答
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值，您需要使用以下方法获取srcMatch返回的数组中的第二项：

var srcValue = srcMatch[1];

返回数组中的第一项（索引0）将具有完全匹配（src="http://player.vimeo.com/video/THIS_NEEDED在您提供的示例中），但您只需要 URL（示例中由 ... 捕获的部分([^\"]+)）http://player.vimeo.com/video/THIS_NEEDED，因此您需要第二项数组（索引1）：

所以，现在你有了src值，你需要抓住它的最后一部分，所以使用字符串split()函数来获取 URL 的所有“片段”：

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

由于您只想要最后一个，请使用length - 1从该数组中获取最后一项：

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

videoId将是您正在寻找的值（THIS_NEEDED在示例中）。

注意：我遗漏了很多你想要做的错误检查（例如，match函数是否返回任何值，分割src值的长度是否大于 0 等）并且有一些方法可以缩短它的组合步骤，但这应该给你一个好的开始，应该使所有的步骤更容易理解。

没有注释的总代码：

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 回答
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 回答