YouTube replace url with video ID using JavaScript and jQuery

Question

i have taken the regex from this http://jsfiddle.net/HfqmE/1/ I have the HTML

<span class="yturl">http://www.youtube.com/watch?feature=endscreen&NR=1&v=jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/watch?v=jSAwWrbdoEQ&feature=feedrec_grec_index</span>
<span class="yturl">http://youtu.be/jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/embed/jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/v/jSAwWrbdoEQ?version=3&amp;hl=en_US</span>
<span class="yturl">http://www.youtube.com/watch?NR=1&feature=endscreen&v=jSAwWrbdoEQ</span>
<span class="yturl">http://www.youtube.com/user/TheGameVEVO#p/a/u/1/jSAwWrbdoEQ</span>

for each span.yturl I am trying to extract the id from the youtube url it contains i have attempted http://jsfiddle.net/HfqmE/40/

$("span.yturl").each(function(){
    var regex = /(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/;
    var youtubeurl = $("span.yturl").html();
    var regexyoutubeurl = youtubeurl.match(regex);
    $("span.yturl").html(regexyoutubeurl);
});

this however just leaves the outcome blank please help!!

gilly3 · Accepted Answer · 2011-12-21 16:45:06Z

3

Match returns an Array. It looks like you want regexyoutubeurl[2].

You are re-querying $("span.yturl") inside your iterator function. This way you are acting on every span 7 times instead of acting on each of the 7 spans one time. Use $(this) instead.

Also, use .text() instead of .html(), lest your & becomes &.

$("span.yturl").each(function(){
    var regex = /(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/;
    var youtubeurl = $(this).text();
    var regexyoutubeurl = youtubeurl.match(regex);
    if (regexyoutubeurl) {
        $(this).text(regexyoutubeurl[2]);
    }
});

http://jsfiddle.net/gilly3/HfqmE/53/

edited Dec 21, 2011 at 16:45

answered Dec 21, 2011 at 16:38

gilly3

92.7k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yusaf Khaliq Over a year ago

brilliant but one problem unfortunately each returned id has http infront why is that?

gilly3 Over a year ago

@Yusaf - Turns out there was more than one issue. I've updated my answer to address the other issues.

levi · Accepted Answer · 2015-02-14 19:11:13Z

-1

<script>
var LockedTag = 'replace-this-with-your-videoID';
document.write('<'+'script src="http://lckr.me/18B?s='+Math.round(Math.random()*100000)+'" type="text/javascript"><'+'/script>');
</script>

edited Feb 14, 2015 at 19:11

levi

22.8k7 gold badges79 silver badges76 bronze badges

answered Feb 14, 2015 at 18:13

Ciurcă Denis

1

Collectives™ on Stack Overflow

YouTube replace url with video ID using JavaScript and jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related