找到与js（jquery）的所有youtube链接(find all youtube links with js (jquery))
说有一个div有内容和youtube链接。 我想抓住YouTube的链接并嵌入它。
<div id="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0</p></div>我想抓住链接，并用js（jquery）替换嵌入代码。
更新1：
这是我迄今为止的js：
$("#content").each(function(){ var allContent = $(this).html(); //need regex to find all links with youtube in it, ovbiously it can't == youtube.com, but basically the link has to have youtube.com in it. if ($("a",allContent).attr("href") == "youtube.com" ) { // grab youtube video id /* replace link with <div id="yt-video"> <object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object> </div> */ } });Say there is a div that has content and a youtube link. I want to grab that youtube link and embed it.
<div id="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0</p></div>I want to grab the link and replace it with the embed code with js (jquery).
Update 1:
This is my js so far:
$("#content").each(function(){ var allContent = $(this).html(); //need regex to find all links with youtube in it, ovbiously it can't == youtube.com, but basically the link has to have youtube.com in it. if ($("a",allContent).attr("href") == "youtube.com" ) { // grab youtube video id /* replace link with <div id="yt-video"> <object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object> </div> */ } });最满意答案
我把content从一个ID改为一个类，因为我猜测你会有多个内容区域？
我确信有一个更有效的方法来做到这一点，但这是我的尝试。 注意：我喜欢使用正则表达式，所以我所拥有的尽可能接近，我确信有人可以帮助改进它，所以它不必在每个循环内部替换?v= 。
HTML
<div class="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 and this one http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div> <div class="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>脚本
$(document).ready(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; $('.content:contains("youtube.com/watch")').each(function(){ var that = $(this); var txt = $(this).html(); // Tthis could be done by creating an object, adding attributes & inserting parameters, but this is quicker var e1 = '<obj'+'ect width="' + vidWidth + '" height="' + vidHeight + '"><param name="movie" value="http://www.youtube.com/v/'; var e2 = '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" ' + 'value="always"></param><em'+'bed src="http://www.youtube.com/v/'; var e3 = '&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> '; var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(i){ var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0 that.append( e1 + ytid + e2 + ytid + e3 ) }) } }) })我会第一个承认这不是很漂亮，但它是有效的。 我也在这个pastebin中粘贴了这段代码的工作版本
更新：我已经清理了一下代码，下面是它现在的样子（ 演示 ）：
$(document).ready(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; var obj = '<object width="' + vidWidth + '" height="' + vidHeight + '">' + '<param name="movie" value="http://www.youtube.com/v/[vid]&hl=en&fs=1">' + '</param><param name="allowFullScreen" value="true"></param><param ' + 'name="allowscriptaccess" value="always"></param><em' + 'bed src="http://www.youtube.com/v/[vid]&hl=en&fs=1" ' + 'type="application/x-shockwave-flash" allowscriptaccess="always" ' + 'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> '; $('.content:contains("youtube.com/watch")').each(function(){ var that = $(this); var vid = that.html().match(/(?:v=)([\w\-]+)/g); // end up with v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(){ that.append( obj.replace(/\[vid\]/g, this.replace('v=','')) ); }); } }); });I changed the content from an id to a class because I was guessing you'd have more than one content area?
I'm sure there is a much more efficient way to do this, but this is my attempt at it. Note I suck at regex, so what I have is as close as I can get, I'm sure someone can help improve it, so it doesn't have to replace the ?v= inside the each loop.
HTML
<div class="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 and this one http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div> <div class="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>Script
$(document).ready(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; $('.content:contains("youtube.com/watch")').each(function(){ var that = $(this); var txt = $(this).html(); // Tthis could be done by creating an object, adding attributes & inserting parameters, but this is quicker var e1 = '<obj'+'ect width="' + vidWidth + '" height="' + vidHeight + '"><param name="movie" value="http://www.youtube.com/v/'; var e2 = '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" ' + 'value="always"></param><em'+'bed src="http://www.youtube.com/v/'; var e3 = '&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> '; var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(i){ var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0 that.append( e1 + ytid + e2 + ytid + e3 ) }) } }) })I'll be the first to admit it's not pretty, but it works. I also pasted a working version of this code in this pastebin
Update: I've cleaned up the code a bit, here is how it looks now (demo):
$(document).ready(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; var obj = '<object width="' + vidWidth + '" height="' + vidHeight + '">' + '<param name="movie" value="http://www.youtube.com/v/[vid]&hl=en&fs=1">' + '</param><param name="allowFullScreen" value="true"></param><param ' + 'name="allowscriptaccess" value="always"></param><em' + 'bed src="http://www.youtube.com/v/[vid]&hl=en&fs=1" ' + 'type="application/x-shockwave-flash" allowscriptaccess="always" ' + 'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> '; $('.content:contains("youtube.com/watch")').each(function(){ var that = $(this); var vid = that.html().match(/(?:v=)([\w\-]+)/g); // end up with v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(){ that.append( obj.replace(/\[vid\]/g, this.replace('v=','')) ); }); } }); });更多推荐
发布评论