我如何用javascript代码中的嵌入代码替换youtube / vimeo url？ [英] How can I replace youtube / vimeo url with embed code in javascript code?

问题描述

我试过用javascript代码中的嵌入代码替换youtube和vimeo url。

我使用过这段代码：

示例1：

HTML：

$ b

 < div id =divContent>< / div> 
  

JAVASCRIPT：

  $（#divContent）.html（'http://www.youtube.com/watch?v=t-ZRX8984sc< br /> http：// vimeo.com/82495711< br />> http://youtu.be/t-ZRX8984sc'）; 
 
 $（'＃divContent'）。html（function（i，html）{
 return html.replace（/（?: http：\ / \\\ /）？（？ ：？（?: youtube\.com | youtu\.be）\ /（?: watch\？v =）？（。+）/ g，'< iframe width = 200height =100src =http://www.youtube.com/embed/$1frameborder =0allowfullscreen>< / iframe>'）。replace（/（?: http：\ / \ /）？（?: www \。）？（?: vimeo\.com）\ /(.+)/ g，'< iframe src =// player.vimeo.com/video/ $ 1width =200height =100frameborder =0webkitallowfullscreen mozallowfullscreen allowfullscreen>< / iframe>'）; 
 
}）; 
  

演示示例1： http://jsfiddle.net/88Ms2/301/ - 无法使用。

示例2

HTML：

 < div id =divContent> 
 http://www.youtube.com/watch?v=t-ZRX8984sc 
< br /> 
 http://vimeo.com/82495711 
< br /> 
 http://youtu.be/t-ZRX8984sc 
< / div> 
  

JAVASCRIPT：

  $（'＃divContent'）。html（function（i，html）{
 return html.replace（/（?: http：\ / \ / ）？（?:www.\\。）？（?: youtube\.com | youtu\.be）\ /（?: watch\？v =）？（。+）/ g，'< iframe width =200height =100src =http://www.youtube.com/embed/$1frameborder =0allowfullscreen>< / iframe>'）。replace（/（?: http ：\ / \ /）？（?: www \。）？（?: vimeo\.com）\ /(.+)/ g，'< iframe src =// player.vimeo。 com / video / $ 1width =200height =100frameborder =0webkitallowfullscreen mozallowfullscreen allowfullscreen>< / iframe>'）; 
 
}）; 
  

演示示例2： http://jsfiddle.net/88Ms2/300/ - 工作正常

我用ajax从数据库中检索了一个数据。我需要使用javascript将html代码插入到div中。在示例1中，将javascript代码更改为：

  $（'＃divContent'）。contents（）
 .filter（function（）{
 return this。 nodeType === 3; 
}）
 .map（function（index，text）{
 $（text）.replaceWith（
 text.textContent.replace（/（？ ：HTTP：？？？？\ / \ /）（?: www\）（?: youtube\.com | youtu\.be）\ /（?: watch\ v =）（ 。+）/ g，'< iframe width =200height =100src =http://www.youtube.com/embed/$1frameborder =0allowfullscreen>< / iframe>' ）.replace（/（?: http：\ / \ /）？（?: www \。）？（?: vimeo\.com）\ /(.+)/ g，'< iframe src =// player.vimeo.com/video/$1width =200height =100frameborder =0webkitallowfullscreen mozallowfullscreen allowfullscreen>< / iframe>'）
）; 
}）
  

现在应该可以使用了。

I've tried replace youtube and vimeo url with embed code in javascript code.

I've used this code:

EXAMPLE 1:

HTML:

<div id="divContent"></div>

JAVASCRIPT:

$("#divContent").html('http://www.youtube.com/watch?v=t-ZRX8984sc <br /> http://vimeo.com/82495711 <br /> http://youtu.be/t-ZRX8984sc');

$('#divContent').html(function(i, html) {
    return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

});

DEMO EXAMPLE 1: http://jsfiddle.net/88Ms2/301/ - It's not working.

EXAMPLE 2

HTML:

<div id="divContent">
http://www.youtube.com/watch?v=t-ZRX8984sc
    <br />
http://vimeo.com/82495711
    <br />
http://youtu.be/t-ZRX8984sc
</div>

JAVASCRIPT:

$('#divContent').html(function(i, html) {
    return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

});

DEMO EXAMPLE 2: http://jsfiddle.net/88Ms2/300/ - It's working

I've retrieved a data from database using ajax. I need the data with html code insert into div using javascript. How can I modify the example 1 to the correct code?

解决方案

In example 1, change the javascript code to:

$('#divContent').contents()
    .filter(function(){
        return this.nodeType === 3;
     })
    .map(function(index, text){
        $(text).replaceWith(
            text.textContent.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
        );    
    })

It should work now.

这篇关于我如何用javascript代码中的嵌入代码替换youtube / vimeo url？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！