Javascript Regex Mobile Device Audio Replace

Question

I have a question regarding how to use Regex in JavaScript to go through every instance of div's with class="audioplayer", then either a) add a download link at the bottom if it's on a desktop computer, or b) replace the whole thing with an HTML5 audio player (using the URL) if it's on an iPhone, iPad, iPod, etc. Here is the main HTML:

<div class="audioplayer">
<embed src="http://www.site.com/audioplayer.swf" wmode="transparent" allowscriptaccess="never" allowfullscreen="false" scale="noscale" flashvars="sourceId=4&amp;mp3url=http://brightcove.vo.llnwd.net/pd16/media/44692000001/44692000001_1745411065001_LEOG-18.mp3&amp;autoplay=false&amp;mp3title=THE LEAGUE OF EXTREMELY ORDINARY GENTLEMEN: Conned Out&amp;color=273643" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/products/flashplayer" height="139" width="356"> 
</embed>
</div>

From what I've read, this regex will pull any and all urls out of the above text:

/\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'\"\\.,<>?\u00AB\u00BB\u201C\u201D\u2018\u2019]))/i

And this is the initial mock-up of what I was thinking:

jQuery(document).ready(function($) {
    $("div.audioplayer").each(function () {
        var regex = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'\"\\.,<>?\u00AB\u00BB\u201C\u201D\u2018\u2019]))/i;
            if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
                $(this).empty();
                $(this).append('<audio src="'+regex+'"controls>');
            };
            else(){
                $(this).append('<p></p><p></p><p class="audioembed">Click here to <a href="'+regex+'">Download MP3</a></p>');
            };
    });
});

But obviously I'm missing some key steps:

1) I want to only run the regex on whatever is inside div.audioplayer and only return the URL that is directly after mp3url=.

2) I'm obviously missing something on how to take that returned URL, place it in a variable, and then call that specific variable in the append portions.

Any help you could give me, or if you could point me in the right direction would be appreciated.

Answer 1

You could try just reading the attribute:

jQuery(document).ready(function($) {
    $(".audioplayer").each(function() {
        var mp3 = $("embed", this).attr("flashvars").match(/mp3url=(.*?)(?:&|$)/)[1];
        if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
            $(this).empty();
            $(this).append('<audio src="' + mp3 + '"controls>');
        } else {
            $(this).append('<p></p><p></p><p class="audioembed">Click here to <a href="' + mp3 + '">Download MP3</a></p>');
        }
    });
});

Demo: http://jsfiddle.net/mNJXc/

Answer 2

You can and you shall traverse DOM nodes without using regex. You can do it directly with jQuery or javascript using proper selectors. See: http://api.jquery.com/attr/

Use it to get "flashvars" attribute, and do string processing on that to retreive the URL.