Javascript 正则表达式将 iframe 替换为可点击的 YouTube 链接

Question

我正在通过 javascript 从博客导入 rss 提要，并使用它向移动应用程序显示元素，因此不能选择 DOM 操作。

我有一个 json 解析的 rss 元素，它是一篇博文，可能包含一个或多个 youtube 视频 iframe，格式如下：<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>

我需要首先从 iframe 中获取 src，将其存储到变量中以获取视频代码，然后将 <iframe...></iframe> 替换为 <a href="http://youtube.com/watch?v=YOUTUBEID"><img src="http://img.youtube.com/vi/YOUTUBEID/1.jpg" width="100%" /></a> 之类的东西

我找到的解决方案都是 PHP 解决方案，我无法将它们转换为 Javascript。参考：

• PHP Regular expression to remove iframe (which can be used to replace)
• Get URL from iframe using PHP Regex

到目前为止，我尝试过使用 javascript 函数

string.replace('.../g')

但是使用 PHP 中完全相同的正则表达式就没有运气了。此外，我需要在可能出现在我的字符串中的所有 iframe 上进行此操作，而不仅仅是一个或第一个。我尝试的基本上就像this guy 一样。但他的答案（操纵 DOM）对我来说不是一个选择。

有人可以帮我吗？提前致谢

Answer 1

我假设您在 javascript 中有一个带有 iframe 元素的字符串。试试这个 javascript 代码：

var iframe = '<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>'

var pattern = /src="([^"]+)"/ //finds the whole url
var match = pattern.exec(iframe);
var url = match[1];

pattern = /embed\/([\d\w]+)/;
match = pattern.exec(url)
var youtubeId = match[1];

var anchor = '<a href="http://youtube.com/watch?v='+youtubeId+'"><img src="http://img.youtube.com/vi/'+youtubeId+'/1.jpg" width="100%" /></a>'

alert(anchor)

http://jsfiddle.net/7EMzf/ 适用于您的示例。

请注意，我使用的正则表达式非常简单，您可能需要考虑一些可能遇到的极端情况。

Answer 2

这是 c#，但您应该能够弄清楚如何将其更改为 JavaScript。注意：我没有转义字符串中的引号，您必须这样做。

string text = Regex.Replace( inputString, @"src="(.+?)"", "<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>" , RegexOptions.None );

搜索字符串：

"src="(.+?)""

替换字符串：

"<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>"

使用http://www.regular-expressions.info/javascriptexample.html 这些是输入和输出：

Regexp:
<iframe src="(.+?)".+</iframe>

Subject string:
<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>

Replacement text:
<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>

Result:
<iframe <a href="http://youtube.com/watch?v=//www.youtube.com/embed/0nvGQLnKg4Q"><img src="http://img.youtube.com/vi///www.youtube.com/embed/0nvGQLnKg4Q/1.jpg" width="100%" /></a> height="360" width="480" allowfullscreen="" frameborder="0"></iframe>

您还可以在该网站上查看示例 JavaScript 代码（它是如何替换的，等等）

如果你想抓取整个 iframe 字符串并替换它：

用途：

<iframe src="(.+?)".+</iframe>

作为您的查找字符串。

Answer 3

扩展@klarki 答案

假设下面是你的 HTML：

<div id="content">
    <iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>alksdmalksdmkalsmdasd
    <img src="1.jpg" alt="" />
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
    IpsumLorem Ipsum
    <iframe src="//www.youtube.com/embed/1mgCQLnKg7K" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>
</div>

Javascript：

var iframe = document.getElementById("content").innerHTML;  //your post content string

    var pattern = /<iframe.*?\/iframe>/gm;
    var mySafeContent = iframe.replace(pattern, function (sMatch) { //making a callback function to extract youtube video ID and replace <iframe /> with <a />

        var url = /src="(.*?)"/g.exec(sMatch), //extract current iframe video source
            source = url[1];

        pattern = /embed\/([\d\w]+)/;
        match = pattern.exec(source);
        var youtubeId = match[1];

        var anchor = '<a href="http://youtube.com/watch?v='+youtubeId+'"><img src="http://img.youtube.com/vi/'+youtubeId+'/1.jpg" width="100%" /></a>';

        return anchor; //Replaced the current iframe with the anchor above
    });

    document.getElementById("content").innerHTML = mySafeContent; //your full content string variable

Live Example

Answer 4

这个链接可能更接近你想要的：

http://jsfiddle.net/zfzXa/1/

注意查找字符串：

var find = '<iframe src="(//www.youtube.com.+?)".+</iframe>';

现在这将只替换完全以以下内容开头的内容：

<iframe src="(//www.youtube.com

完整代码：

var find = '<iframe src="(//www.youtube.com.+?)".+</iframe>';
var replace = '<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>';
var input = '<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>';

var re = new RegExp(find, "g");
var output = input.replace(re, replace);
alert(output);

如果这可能是一个问题，您可能需要调整正则表达式来处理空格。