title: Javascript Regex Mobile Device Audio Replace
body: <p>I have a question regarding how to use Regex in JavaScript to go through every instance of div's with <code>class="audioplayer"</code>, 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:</p>
  
  <pre><code>&lt;div class="audioplayer"&gt;
  &lt;embed src="http://www.site.com/audioplayer.swf" wmode="transparent" allowscriptaccess="never" allowfullscreen="false" scale="noscale" flashvars="sourceId=4&amp;amp;mp3url=http://brightcove.vo.llnwd.net/pd16/media/44692000001/44692000001_1745411065001_LEOG-18.mp3&amp;amp;autoplay=false&amp;amp;mp3title=THE LEAGUE OF EXTREMELY ORDINARY GENTLEMEN: Conned Out&amp;amp;color=273643" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/products/flashplayer" height="139" width="356"&gt; 
  &lt;/embed&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From what I've read, this regex will pull any and all urls out of the above text:</p>
  
  <pre><code>/\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()&lt;&gt;]+|\(([^\s()&lt;&gt;]+|(\([^\s()&lt;&gt;]+\)))*\))+(?:\(([^\s()&lt;&gt;]+|(\([^\s()&lt;&gt;]+\)))*\)|[^\s`!()\[\]{};:'\"\\.,&lt;&gt;?\u00AB\u00BB\u201C\u201D\u2018\u2019]))/i
  </code></pre>
  
  <p>And this is the initial mock-up of what I was thinking:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      $("div.audioplayer").each(function () {
          var regex = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()&lt;&gt;]+|\(([^\s()&lt;&gt;]+|(\([^\s()&lt;&gt;]+\)))*\))+(?:\(([^\s()&lt;&gt;]+|(\([^\s()&lt;&gt;]+\)))*\)|[^\s`!()\[\]{};:'\"\\.,&lt;&gt;?\u00AB\u00BB\u201C\u201D\u2018\u2019]))/i;
              if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
                  $(this).empty();
                  $(this).append('&lt;audio src="'+regex+'"controls&gt;');
              };
              else(){
                  $(this).append('&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="audioembed"&gt;Click here to &lt;a href="'+regex+'"&gt;Download MP3&lt;/a&gt;&lt;/p&gt;');
              };
      });
  });
  </code></pre>
  
  <p>But obviously I'm missing some key steps:</p>
  
  <p>1) I want to only run the regex on whatever is inside div.audioplayer and only return the URL that is directly after <code>mp3url=</code>.</p>
  
  <p>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.</p>
  
  <p>Any help you could give me, or if you could point me in the right direction would be appreciated. </p>