Javascript - 将 youtube/vimeo url 转换为嵌入版本以用于论坛评论功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22544625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - convert youtube/vimeo url's into embed versions for use on a forum comment feature
提问by The Old County
Trying to make something similar to facebook. I've created this javascript url pattern converter. Something like this could be triggered just as the user clicks on the submit button for a forum post - convert url's into embed html variants. Any ways to improve this?
试图制作类似于 facebook 的东西。我已经创建了这个 javascript url 模式转换器。像这样的事情可能会在用户点击论坛帖子的提交按钮时触发 - 将 url 转换为嵌入的 html 变体。有什么方法可以改善这种情况吗？
http://jsfiddle.net/88Ms2/377/
http://jsfiddle.net/88Ms2/377/
var videoEmbed = {
invoke: function(){
$('body').html(function(i, html) {
return videoEmbed.convertVideo(html);
});
},
convertVideo: function(html){
var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
if(pattern1.test(html)){
console.log("html", html);
var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var html = html.replace(pattern1, replacement);
}
if(pattern2.test(html)){
console.log("html", html);
var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(pattern2, replacement);
}
return html;
}
}
setTimeout(function(){
videoEmbed.invoke();
},3000);
回答by The Old County
LATEST CODE ******** http://jsfiddle.net/88Ms2/378/
最新代码 ******** http://jsfiddle.net/88Ms2/378/
This mimics the facebook post feature - of turning a youtube, vimeo or image into a media based link. This will be useful in taking on
这模仿了 facebook 发布功能 - 将 youtube、vimeo 或图像转换为基于媒体的链接。这将有助于承担
Interested in having the code enhanced.
有兴趣增强代码。
var videoEmbed = {
invoke: function(){
$('body').html(function(i, html) {
return videoEmbed.convertMedia(html);
});
},
convertMedia: function(html){
var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
var pattern3 = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;
if(pattern1.test(html)){
var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var html = html.replace(pattern1, replacement);
}
if(pattern2.test(html)){
var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(pattern2, replacement);
}
if(pattern3.test(html)){
var replacement = '<a href="" target="_blank"><img class="sml" src="" /></a><br />';
var html = html.replace(pattern3, replacement);
}
return html;
}
}
回答by Goose
Here is a collection of functions that convert several types of media into embeds or other useful formats. Also handles input such as text link.com/file.jpg text. Credit to The Old County because this is built on top of his code.
这是将几种类型的媒体转换为嵌入或其他有用格式的函数集合。还处理输入，例如text link.com/file.jpg text. 归功于 The Old County，因为这是建立在他的代码之上的。
function convert_youtube(input) {
var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(\S+)/g;
if (pattern.test(input)) {
var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>';
var input = input.replace(pattern, replacement);
// For start time, turn get param & into ?
var input = input.replace('&t=', '?t=');
}
return input;
}
function convert_vimeo(input) {
var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(\S+)/g;
if (pattern.test(input)) {
var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var input = input.replace(pattern, replacement);
}
return input;
}
function convert_twitch(input) {
var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:twitch\.tv)\/?(\S+)/g;
if (pattern.test(input)) {
var replacement = '<iframe src="https://player.twitch.tv/?channel=&!autoplay" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>';
var input = input.replace(pattern, replacement);
}
return input;
}
function convert_vocaroo(input) {
var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:vocaroo\.com\/i)\/?(\S+)/g;
if (pattern.test(input)) {
var replacement = '<object width="148" height="44"><param name="movie" value="http://vocaroo.com/player.swf?playMediaID=&autoplay=0"></param><param name="wmode" value="transparent"></param><embed src="http://vocaroo.com/player.swf?playMediaID=&autoplay=0" width="148" height="44" wmode="transparent" type="application/x-shockwave-flash"></embed></object>';
var input = input.replace(pattern, replacement);
}
return input;
}
function convert_video_url(input) {
var pattern = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:webm|mp4|ogv))/gi;
if (pattern.test(input)) {
var replacement = '<video controls="" loop="" controls src="" style="max-width: 960px; max-height: 676px;"></video>';
var input = input.replace(pattern, replacement);
}
return input;
}
function convert_image_url(input) {
var pattern = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;
if (pattern.test(input)) {
var replacement = '<a href="" target="_blank"><img class="sml" src="" /></a><br />';
var input = input.replace(pattern, replacement);
}
return input;
}
// Run this function last
function convert_general_url(input) {
// Ignore " to not conflict with other converts
var pattern = /(?!.*")([-a-zA-Z0-9@:%_\+.~#?&//=;]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=;]*))/gi;
if (pattern.test(input)) {
var replacement = '<a href="" target="_blank"></a>';
var input = input.replace(pattern, replacement);
}
return input;
}
回答by philipeachille
I share my answer here too. It is a bit different rom the others but may be useful in some contexts. Happy to get suggestions also on improvements.
我也在这里分享我的答案。它与其他人有点不同，但在某些情况下可能有用。很高兴得到关于改进的建议。
Includes Youtube and Vimeo links, but not yet images
包括 Youtube 和 Vimeo 链接，但还没有图像
See also this Codepen here.
另请参阅此处的 Codepen。
const convertLinks = ( input ) => {
let text = input;
const linksFound = text.match( /(?:www|https?)[^\s]+/g );
const aLink = [];
if ( linksFound != null ) {
for ( let i=0; i<linksFound.length; i++ ) {
let replace = linksFound[i];
if ( !( linksFound[i].match( /(http(s?)):\/\// ) ) ) { replace = 'http://' + linksFound[i] }
let linkText = replace.split( '/' )[2];
if ( linkText.substring( 0, 3 ) == 'www' ) { linkText = linkText.replace( 'www.', '' ) }
if ( linkText.match( /youtu/ ) ) {
let youtubeID = replace.split( '/' ).slice(-1)[0];
aLink.push( '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/' + youtubeID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>' )
}
else if ( linkText.match( /vimeo/ ) ) {
let vimeoID = replace.split( '/' ).slice(-1)[0];
aLink.push( '<div class="video-wrapper"><iframe src="https://player.vimeo.com/video/' + vimeoID + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>' )
}
else {
aLink.push( '<a href="' + replace + '" target="_blank">' + linkText + '</a>' );
}
text = text.split( linksFound[i] ).map(item => { return aLink[i].includes('iframe') ? item.trim() : item } ).join( aLink[i] );
}
return text;
}
else {
return input;
}
}this replaces long and clumsy links within plain texts to short clickable links within that text. (And also wraps videos in responsive iframes)
这将纯文本中长而笨拙的链接替换为该文本中的可点击的短链接。（并且还将视频包装在响应式 iframe 中）
Example:
例子：
This clumsy link https://stackoverflow.com/questions/49634850/javascript-convert-plain-text-links-to-clickable-links/52544985#52544985 is very clumsy and this http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split is not much better. This one www.apple.com is nice but www could be omittedBecomes:
变成：
This clumsy link <a href="https://stackoverflow.com/questions/49634850/javascript-convert-plain-text-links-to-clickable-links/52544985#52544985" target="_blank">stackoverflow.com</a> is very clumsy and this <a href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank">developer.mozilla.org</a> is not much better. This one <a href="http://www.apple.com" target="_blank">apple.com</a> is nice but www could be omittedIs displayed as:
显示为：
This clumsy link stackoverflow.comis very clumsy and this developer.mozilla.orgis not much better. This one apple.comis nice but www can be removed
这个笨拙的链接stackoverflow.com非常笨拙，这个developer.mozilla.org也好不到哪里去。这一个apple.com不错，但 www 可以删除
