Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Regex Mobile Device Audio Replace
    text
    copied!<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>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload