2012-07-30 57 views
1

我有一个关于如何在JavaScript中使用正则表达式来通过class="audioplayer"的div的每个实例,然后a)在底部添加一个下载链接,如果它是在台式机上,或b )与HTML5音频播放器更换整个事情(使用URL),如果是在iPhone,iPad的,iPod的,等等。这里是主要的HTML:Javascript正则表达式移动设备音频替换

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

从我读过,这个正则表达式会拉出任何和所有的网址:

/\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 

这是t他最初的实体模型,我在想什么:

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>'); 
      }; 
    }); 
}); 

但很明显,我失去了一些关键步骤:

1)我只想运行无论正则表达式是内部div.audioplayer,只返回mp3url=之后的URL。

2)我明显错过了如何获取返回的URL,将其放入一个变量,然后在追加部分中调用该特定变量。

任何帮助你可以给我,或者如果你能指出我在正确的方向,将不胜感激。

回答

2

你可以尝试只读取属性:

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>'); 
     } 
    }); 
}); 

演示:http://jsfiddle.net/mNJXc/

+0

哇哦,我甚至没有想到这一点。非常感谢! – 2012-07-30 15:14:21

0

你可以和你不使用正则表达式遍历DOM节点。您可以使用适当的选择器直接使用jQuery或JavaScript来执行此操作。 见: http://api.jquery.com/attr/

用它来获得“Flash变量”属性,并做字符串处理对中检索的URL。