将多个 youtube/vimeo 链接变成嵌入式播放器

Question

所以我试图将多个链接转换为 youtube/vimeo 嵌入 iframe。

它似乎适用于 messageText div 中的单个视频，但是当我添加多个视频时，链接会中断。

Heres a JSFiddle of the code

<div class="messageText"> 
LOOK AT ME!!! youtube.com/watch?v=8tv-e9DJqK4 youtube.com/watch?v=8tv-e9DJqK4    youtube.com/watch?v=8tv-e9DJqK4
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.messageText').html(function(i, html) {

address = html.replace(/(?:http:\/\/|https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen id="videoPlayer" ></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe id="videoPlayer" src="//player.vimeo.com/video/$1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');    
alert(address);
return address;
});
});
 </script>

就像我说的，我试图获取任何 youtube、vimeo 链接以转换为嵌入式播放器，无论 div 中有多少视频。提前感谢您的帮助！

Answer 1

html.replace(/(?:http:\/\/|https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.*?)([^\s]+)/g, '<iframe src="http://www.youtube.com/embed/$2" frameborder="0" allowfullscreen id="videoPlayer" ></iframe>').replace(/(?:http:\/\/|https:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe id="videoPlayer" src="//player.vimeo.com/video/$1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

Answer 2

实际上，您使用的是贪婪运算符，而您捕获的内容不正确，对您的正则表达式稍作修改即可：

使用这个

(?:http:\/\/|https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.*?)([^\s]+)

然而，你实际上不需要纠正这么长的正则表达式，你可以使用前瞻来代替。暂时这对你有用..

同样你也可以找出 vimeo :)

更新小提琴：http://jsfiddle.net/3Rb5H/2/

干杯！