1

我有一个关于如何在 JavaScript 中使用 Regex 来遍历 div 的每个实例的问题class="audioplayer"，然后 a）如果它在台式计算机上，则在底部添加一个下载链接，或者 b）用 HTML5 音频播放器替换整个内容（使用 URL）如果它在 iPhone、iPad、iPod 等上。这是主要的 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>

从我读过的内容来看，这个正则表达式将从上述文本中提取任何和所有 url：

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

这是我所想的最初模型：

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 中的任何内容上运行正则表达式，并且只返回直接位于 .audioplayer 之后的 URL mp3url=。

2) 我显然遗漏了如何获取返回的 URL，将其放入变量中，然后在附加部分中调用该特定变量的内容。

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

4

2 回答 2

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/

于 2012-07-30T07:31:17.627 回答
0

您可以并且应该在不使用正则表达式的情况下遍历 DOM 节点。您可以使用适当的选择器直接使用 jQuery 或 javascript 来完成。见： http ://api.jquery.com/attr/

使用它来获取“flashvars”属性，并对其进行字符串处理以检索 URL。

于 2012-07-30T07:28:14.350 回答