Question

所以即时尝试将多个链接转换为youtube / vimeo嵌入iframe。

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

<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

实际上你正在使用一个贪婪的运算符而你正在捕获的东西是不对的，对你的正则表达式进行一点修改就可以了：

使用此

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

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

同样你也可以找出vimeo：）

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

欢呼！

Answer 2

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>');

将多个youtube / vimeo链接转换为嵌入式播放器

2 个答案: