我有一些 HTML 代码 - 例如:
<div>Text</div>
http://www.youtube.com/watch?v=QZ2ekuCu4gM&feature=relmfu
<div>Text</div>
youtube.com/watch?v=adrJx864olE&feature=g-logo-xit
<div>Text</div>
<a href="#">LINK</a>
我需要用在该 URL 处嵌入视频的 iframe 自动替换任何 YouTube URL,如下所示:
<div>Text</div>
<iframe width="560" height="315"
src="http://www.youtube.com/embed/QZ2ekuCu4gM" frameborder="0"
allowfullscreen></iframe>
<div>Text</div>
<iframe width="560" height="315"
src="http://www.youtube.com/embed/adrJx864olE" frameborder="0"
allowfullscreen></iframe>
<div>Text</div>
<a href="#">LINK</a>
如何在 HTML 代码中搜索来自 YouTube 的链接,并使用 JavaScript 将其替换为等效的 iframe 代码?
最佳答案
这是一种实现方式:
function linkYT(el) {
if (!el) {
return false;
}
else {
var children = el.childNodes,
text = [];
for (var i=0, len=children.length; i<len; i++){
var cur = children[i],
nType = cur.nodeType,
content = cur.nodeValue,
url = 'http://www.youtube.com/embed/';
if (nType == 3 && content.indexOf('youtube.com') > -1) {
var embed = content.trim().match(/v=(\w+)/)[1],
iframe = document.createElement('iframe');
iframe.src = url + embed;
el.insertBefore(iframe, cur.nextSibling);
cur.parentNode.removeChild(cur);
}
}
}
}
var el = document.getElementById('content');
linkYT(el);
请注意,根本没有完整性检查,并且这种方法要求视频标识符以 v=
开头,并且以非字母数字字符结尾。
我只在 Opera 12 和 Chromium 19 中进行了测试和验证。
考虑到 一种 其他形式的 YouTube URL 格式:
function createIframe(embed, parent, after, url){
if (!embed || !parent || !after) {
return false;
}
else {
url = url ? url : 'http://www.youtube.com/embed/';
var iframe = document.createElement('iframe');
iframe.src = url + embed;
parent.insertBefore(iframe, after.nextSibling);
parent.removeChild(after);
}
}
function linkYT(el) {
if (!el) {
return false;
}
else {
var children = el.childNodes,
text = [];
for (var i=0, len=children.length; i<len; i++){
var cur = children[i],
nType = cur.nodeType,
content = cur.nodeValue,
url = 'http://www.youtube.com/embed/';
if (nType == 3) {
if (content.indexOf('youtube.com') > -1) {
var embed = content.trim().match(/v=(\w+)/)[1];
createIframe(embed, el, cur);
}
else if (content.indexOf('youtu.be') > -1) {
var embed = content.trim().match(/be\/(\w+)/)[1];
createIframe(embed, el, cur);
}
}
}
}
}
var el = document.getElementById('content');
linkYT(el);
实际上这是相同的过程,只是正则表达式略有不同。
因为有两个地方 nodeType
必须等于 3
和两个地方 iframe
正在创建,我将两个 indexOf()
评估包装在 if
中以测试 nodeType
和抽象的 iframe
- 创建一个单独的函数,两者都只是为了避免不必要的重复。
引用资料:
- >
childNodes
. - >
createElement()
. - >
indexOf()
. - >
insertBefore()
. - >
nextSibling
. - >
match()
. - >
nodeType
. - >
nodeValue
. - >
parentNode
. - > Regular Expressions .
- >
removeChild()
. - >
trim()
.
关于javascript - 替换文本中的随机 youtube 链接以使用 javascript 嵌入代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11621275/