Question

我正在通过javascript从博客导入rss feed并使用它来向移动应用程序显示元素，因此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。参考：

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

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

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

任何人都可以帮助我吗？提前致谢

Answer 1

这是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 2

我假设你在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 3

此链接可能更接近您想要的内容：

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

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

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

3 个答案: