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!!

Answer 1

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/