I need to check whether a URL is an image.
The answer here
/(jpg|gif|png)$/.test(...
raises a false positive in my (special) case when there's an extension in a non-image URL
http://www.example.com/jpg/bpgpage/
(PS: can't use jquery, only javascript/regex)
Provided that the uri ends with the extension, this should work every time.
Code:
var isUriImage = function(uri) {
//make sure we remove any nasty GET params
uri = uri.split('?')[0];
//moving on, split the uri into parts that had dots before them
var parts = uri.split('.');
//get the last part ( should be the extension )
var extension = parts[parts.length-1];
//define some image types to test against
var imageTypes = ['jpg','jpeg','tiff','png','gif','bmp'];
//check if the extension matches anything in the list.
if(imageTypes.indexOf(extension) !== -1) {
return true;
}
}
Example:
http://jsfiddle.net/fMCFB/1/
Maybe you can add a dot . before the regular expression, as such:
/\.(jpg|gif|png)$/.test( ..
That will try to match .jpg, .gif and .png in URLs.
The regular expression you mentioned though, does try to search for jpg, gif and png only at the end of the URL, so I'm not sure how it matched http://www.example.com/jpg/bpgpage/.
If you ommit the dot . though, it will still match http://www.example.com/jpg
you can verify in the content Type header here's a function example:
async function verifyUrlImage(url){
try{
let resp= $.ajax(url);
await resp;
let headers=resp.getAllResponseHeaders().split(/\n/g);
for(let i=0;i<=headers.length;i++){
let hd=headers[i].split(': ')
if (hd[0]=='content-type' && hd[1].indexOf('image')==0)
return true;
}
}
catch{}
return false;
}
So this will look if content-type starts with image then the link is an image acording this image types:
https://www.iana.org/assignments/media-types/media-types.xhtml#image
you can test it:
let isImage = await verifyUrlImage('https://www.gravatar.com/avatar/332cf4cffa6c5161c026485b98655079?s=48&d=identicon&r=PG');
Here's what I would do, where "str" is the string you're matching:
return (str.match(/\.(jpg|gif|png)$/)!= null);
// function for check the type of any source
function checkExtension(file) {
var extension = file.substr((file.lastIndexOf('.') + 1));
switch (extension) {
case 'jpg':
case 'png':
case 'gif':
return "img" // There's was a typo in the example where
break; // the alert ended with pdf instead of gif.
case 'mp4':
case 'mp3':
case 'ogg':
return "video"
break;
case 'html':
return "html"
break;
}
};
var ex = checkExtension("if-a-link-is-an-image.png")
console.log(ex)
Why not pull the last three characters using substr?
url.substr(url.length-3, 3);
Related
I have an API that returns a domain to my front end.
This domain is the string format.
For eg: "google.com" / "google.co.ok"
or "test.google.com"/ "test.google.co.ok:
Notice that the string does not contain any protocol.
I want to write a method that parses the string and returns true if the string contains a subdomain.
In the above 2 examples, the method should return true for test.google.com or test.google.co.ok
EDIT: If it were python, i would write something like below. But hoping something similat was available in JS.
from tld import get_tld, get_fld
get_tld("www.google.co.uk", fix_protocol=True)
# 'co.uk'
get_fld("www.google.co.uk", fix_protocol=True)
# 'google.co.uk'
There are multiple JavaScript libraries available that can be used the same way you're using tld. psl is older but still has millions of weekly downloads.
You could use psl and implement something like this:
import { parse } from "psl";
function hasSubdomain(str) {
const { subdomain } = parse(str);
return subdomain !== null;
}
hasSubdomain("www.google.com") // true
hasSubdomain("google.co.uk") // false
Feel free to clone and edit this example on RunKit as you see fit.
Sure thing. Since there's no protocol, maybe something like:
"word.domain.com"
.split(".").length > 2 // true
"domain.com"
.split(".").length > 2 // false
"www.domain.co.uk"
.split(".").length > 2 // uh-oh
You'll likely need to parse out "www" and second-level domains (".co", ".gc", etc).
You can use RegExp to perform string manipulation. Please take a look at the following snippet and run the code and see the results from different test cases covering most of the possibilities. Let me know if it's helpful.
function subDomain(url) {
// REMOVE LEADING AND TRAILING WHITE SPACE
url = url.replace(new RegExp(/^\s+/), ""); // START
url = url.replace(new RegExp(/\s+$/), ""); // END
// CONVERT BACK SLASHES TO FORWARD SLASHES
url = url.replace(new RegExp(/\\/g), "/");
// REMOVES 'www.' FROM THE START OF THE STRING
url = url.replace(new RegExp(/^www\./i), "");
// REMOVE STRING FROM FIRST FORWARD SLASH ON
url = url.replace(new RegExp(/\/(.*)/), "");
// REMOVES '.??.??' OR '.???.??' FROM END - e.g. '.CO.UK', '.COM.AU'
if (url.match(new RegExp(/\.[a-z]{2,3}\.[a-z]{2}$/i))) {
url = url.replace(new RegExp(/\.[a-z]{2,3}\.[a-z]{2}$/i), "");
// REMOVES '.??' or '.???' or '.????' FROM END - e.g. '.US', '.COM', '.INFO'
} else if (url.match(new RegExp(/\.[a-z]{2,4}$/i))) {
url = url.replace(new RegExp(/\.[a-z]{2,4}$/i), "");
}
// CHECK TO SEE IF THERE IS A DOT '.' LEFT
var subDomain = url.match(new RegExp(/\./g)) ? true : false;
return subDomain;
}
const subdomainInput = "test.google.com";
const subdomainInputWithPath = "test.google.com/test";
const subdomainInputWithPathWithWS = " test.google.com ";
const subdomainInputWithWS = " test.google.com ";
const subdomainInputWithQueryString = "test.google.com/test?token=33333";
const noSubInput = "google.com"
const noSubInputWithPath = "google.com/search"
const noSubInputWithPathWithQueryString = "google.com/search?token=ttttttt"
console.log("Test Run\n")
conosle.log("With subdomain test cases")
console.log(`subdomainInput: ${subDomain(subdomainInput)}`);
console.log(`subdomainInputWithPath: ${subDomain(subdomainInputWithPath)}`);
console.log(`subdomainInputWithWS: ${subDomain(subdomainInputWithWS)}`);
console.log(`subdomainInputWithPathWithWS: ${subDomain(subdomainInputWithPathWithWS)}`);
console.log(`subdomainInputWithQueryString: ${subDomain(subdomainInputWithQueryString)}`);
conosle.log("Without subdomain test cases")
console.log(`noSubInput: ${subDomain(noSubInput)}`);
console.log(`noSubInput: ${subDomain(noSubInput)}`);
console.log(`noSubInputWithPath: ${subDomain(noSubInputWithPath)}`);
console.log(`noSubInputWithPathWithQueryString: ${subDomain(noSubInputWithPathWithQueryString)}`);
return(subDomain);
}
i need to identify the data/text being submitted from <input> if it contains any of the following. youtube, vimeo,normal website, jpg/png, plain text
if a youtube link is found {
//do something
} else if a vimeo link is found {
//do something
} else if a normal website is found {
//do something
} else if a (jpg/png) is found {
//do something
} else just a text {
} //do something
as of the moment is my syntax. the youtube & vimeo regex format were taken from other posts. but im not sure how to create the proper regex for the others.
ive tried some regex generator but its so complicated to use
im also interested to know if this is the proper way of executing multiple conditional statement.
$(function() {
$(document).on('click','.submit', function () {
var data = $('#input').val();
var youtube = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
var vimeo = /^(http\:\/\/|https\:\/\/)?(www\.)?(vimeo\.com\/)([0-9]+)$/;
if (data.match(youtube)) {
alert("utube");
}
else if (data.match(vimeo)) {
alert("vimeo");
}
else if ...
});
});
There is a million different ways to do this.
The other regex you need are roughly bellow. Also it will save you a bit of a headache if you lowercase your data
var data = $("#input").val.toLowerCase();
Web url
/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+#)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+#)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%#.\w_]*)#?(?:[\w]*))?)/
PNG / JPG is at end of the string
/(png|jpg|jpeg)$/
Plain text i guese would be what ever is left
The most efficient way is also to use a switch statement not a big if else
like this http://www.w3schools.com/js/js_switch.asp
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
I would suggest using a switch statement when you have multiple regex conditions to check for:
var data = $('#input').val();
var youtube = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
var vimeo = /^(http\:\/\/|https\:\/\/)?(www\.)?(vimeo\.com\/)([0-9]+)$/;
var normalWebsite = /^(?:ftp|http|https):\/\/(?:[\w\.\-\+]+:{0,1}[\w\.\-\+]*#)?(?:[a-z0-9\-\.]+)(?::[0-9]+)?(?:\/|\/(?:[\w#!:\.\?\+=&%#!\-\/\(\)]+)|\?(?:[\w#!:\.\?\+=&%#!\-\/\(\)]+))?$/;
var image = /<img\s+src\s*=\s*(["'][^"']+["']|[^>]+)>/;
switch (true) {
case youtube.test(data):
alert('youtube');
break;
case vimeo.test(data):
alert('vimeo');
break;
case normalWebsite.test(data):
alert('normal website');
break;
case image.test(data):
alert('image');
break;
default:
// Here we are assuming anything that doesn't match the above is plain text.
// You will need an additional regex if you want to make sure this doesn't contain html or code.
alert('Plain text');
break;
}
i am currently working on a simple ipad webapp testpiece and got stuck in a simple switch statement that doesn´t work somehow;
i want to format elements according to javascripts window.location string. This might be embarassing simple to fix; but i somehow don´t get it:
Or is there something special about the window.location?
$(document).ready(function() {
path_c = window.location;
switch (path_c){
case "http://192.168.1.37/ryba_testground/":
$('#menu-item-22').addClass('current_page_item');
alert(path_c);
break;
case "http://192.168.1.37/ryba_testground/?page_id=7":
$('#menu-item-21').addClass('current_page_item');
break;
case "http://192.168.1.37/ryba_testground/?page_id=9":
$('#menu-item-20').addClass('current_page_item');
break;
case "http://192.168.1.37/ryba_testground/?page_id=11":
$('#menu-item-19').addClass('current_page_item');
break;
}
});
THX!
Or is there something special about the window.location?
It's a host object, which sometimes act unpredictable. At least, it is an object which evaluates to the href when casted to a string - yet that does not happen when comparing with the switch-cases. Use
var path_c = window.location.href;
window.location returns a Location object, which contains information about the URL of the document and provides methods for changing that URL. So change it to:
var path_c = window.location.href;
I think you want the href property of the window.location object.
path_c = window.location.href;
Full Script
$(document).ready(function() {
path_c = window.location.href;
switch (path_c){
case "http://192.168.1.37/ryba_testground/":
$('#menu-item-22').addClass('current_page_item');
alert(path_c);
break;
case "http://192.168.1.37/ryba_testground/?page_id=7":
$('#menu-item-21').addClass('current_page_item');
break;
case "http://192.168.1.37/ryba_testground/?page_id=9":
$('#menu-item-20').addClass('current_page_item');
break;
case "http://192.168.1.37/ryba_testground/?page_id=11":
$('#menu-item-19').addClass('current_page_item');
break;
}
});
Example: http://jsfiddle.net/9vjY9/
The code seems ok. Try to alert (window.location.href) or console.log(window.location.href), then you can check exactly what does window.location.href gets for each page you test. This might reveal the problem.
You can use window.location.toString() or window.location.href, you even can avoid using switch, with a object map and regular expression to filter your target in url:
var page_idMap = {
'7': '#menu-item-21',
'9': '#menu-item-20',
'11': '#menu-item-19'
}
var id = window.location.href.match(/page_id[=]([0-9]+)/i);
if (!id || !page_idMap(id[1])) {
$('#menu-item-22').addClass('current_page_item');
} else {
$(page_idMap[id[1]]).addClass('current_page_item');
}
I've made a function (in JavaScript) that takes an URL from either YouTube or Vimeo. It figures out the provider and ID for that particular video (demo: http://jsfiddle.net/csjwf/).
function parseVideoURL(url) {
var provider = url.match(/http:\/\/(:?www.)?(\w*)/)[2],
id;
if(provider == "youtube") {
id = url.match(/http:\/\/(?:www.)?(\w*).com\/.*v=(\w*)/)[2];
} else if (provider == "vimeo") {
id = url.match(/http:\/\/(?:www.)?(\w*).com\/(\d*)/)[2];
} else {
throw new Error("parseVideoURL() takes a YouTube or Vimeo URL");
}
return {
provider : provider,
id : id
}
}
It works, however as a regex Novice, I'm looking for ways to improve it. The input I'm dealing with, typically looks like this:
http://vimeo.com/(id)
http://youtube.com/watch?v=(id)&blahblahblah.....
1) Right now I'm doing three separate matches, would it make sense to try and do everything in one single expression? If so, how?
2) Could the existing matches be more concise? Are they unnecessarily complex? or perhaps insufficient?
3) Are there any YouTube or Vimeo URL's that would fail being parsed? I've tried quite a few and so far it seems to work pretty well.
To summarize: I'm simply looking for ways improve the above function. Any advice is greatly appreciated.
Here's my attempt at the regex, which covers most updated cases:
function parseVideo(url) {
// - Supported YouTube URL formats:
// - http://www.youtube.com/watch?v=My2FRPA3Gf8
// - http://youtu.be/My2FRPA3Gf8
// - https://youtube.googleapis.com/v/My2FRPA3Gf8
// - Supported Vimeo URL formats:
// - http://vimeo.com/25451551
// - http://player.vimeo.com/video/25451551
// - Also supports relative URLs:
// - //player.vimeo.com/video/25451551
url.match(/(https?\/\/)(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
var type = null;
if (RegExp.$3.indexOf('youtu') > -1) {
type = 'youtube';
} else if (RegExp.$3.indexOf('vimeo') > -1) {
type = 'vimeo';
}
return {
type: type,
id: RegExp.$6
};
}
Regex is wonderfully terse but can quickly get complicated.
http://jsfiddle.net/8nagx2sk/
function parseYouTube(str) {
// link : //youtube.com/watch?v=Bo_deCOd1HU
// share : //youtu.be/Bo_deCOd1HU
// embed : //youtube.com/embed/Bo_deCOd1HU
var re = /\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9_\-]+)/i;
var matches = re.exec(str);
return matches && matches[1];
}
function parseVimeo(str) {
// embed & link: http://vimeo.com/86164897
var re = /\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i;
var matches = re.exec(str);
return matches && matches[1];
}
Sometimes simple code is nicer to your fellow developers.
https://jsfiddle.net/vkg02mhp/1/
// protocol and www nuetral
function getVideoId(str, prefixes) {
const cleaned = str.replace(/^(https?:)?\/\/(www\.)?/, '');
for(const prefix of prefixes) {
if (cleaned.startsWith(prefix))
return cleaned.substr(prefix.length)
}
return undefined;
}
function getYouTubeId(url) {
return getVideoId(url, [
'youtube.com/watch?v=',
'youtu.be/',
'youtube.com/embed/'
]);
}
function getVimeoId(url) {
return getVideoId(url, [
'vimeo.com/'
]);
}
Which do you prefer to update?
I am not sure about your question 3), but provided that your induction on the url forms is correct, the regexes can be combined into one as follows:
/http:\/\/(?:www.)?(?:(vimeo).com\/(.*)|(youtube).com\/watch\?v=(.*?)&)/
You will get the match under different positions (1st and 2nd matches if vimeo, 3rd and 4th matches if youtube), so you just need to handle that.
Or, if you are quite sure that vimeo's id only includes numbers, then you can do:
/http:\/\/(?:www.)?(vimeo|youtube).com\/(?:watch\?v=)?(.*?)(?:\z|&)/
and the provider and the id will apprear under 1st and 2nd match, respcetively.
Here is my regex
http://jsfiddle.net/csjwf/1/
For Vimeo, Don't rely on Regex as Vimeo tends to change/update their URL pattern every now and then. As of October 2nd, 2017, there are in total of six URL schemes Vimeo supports.
https://vimeo.com/*
https://vimeo.com/*/*/video/*
https://vimeo.com/album/*/video/*
https://vimeo.com/channels/*/*
https://vimeo.com/groups/*/videos/*
https://vimeo.com/ondemand/*/*
Instead, use their API to validate vimeo URLs. Here is this oEmbed (doc) API which takes an URL, checks its validity and return a object with bunch of video information(check out the dev page). Although not intended but we can easily use this to validate whether a given URL is from Vimeo or not.
So, with ajax it would look like this,
var VIMEO_BASE_URL = "https://vimeo.com/api/oembed.json?url=";
var yourTestUrl = "https://vimeo.com/23374724";
$.ajax({
url: VIMEO_BASE_URL + yourTestUrl,
type: 'GET',
success: function(data) {
if (data != null && data.video_id > 0)
// Valid Vimeo url
else
// not a valid Vimeo url
},
error: function(data) {
// not a valid Vimeo url
}
});
about sawa's answer :
a little update on the second regex :
/http:\/\/(?:www\.)?(vimeo|youtube)\.com\/(?:watch\?v=)?(.*?)(?:\z|$|&)/
(escaping the dots prevents from matching url of type www_vimeo_com/… and $ added…)
here is the same idea for matching the embed urls :
/http:\/\/(?:www\.|player\.)?(vimeo|youtube)\.com\/(?:embed\/|video\/)?(.*?)(?:\z|$|\?)/
FWIW, I just used the following to validate and parse both YouTube and Vimeo URLs in an app. I'm sure you could add parentheses to parse out the specific things you're looking for...
/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$|^(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*$/
^^ This is just a combination of 2 separate expressions using | (or) to join them. Here are the original 2 expressions separately:
/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
/^(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*$/
I'm no expert, but it seems to work according to Rubular. Hopefully this helps someone out in the future.
3) Your regex does not match https url's. I haven't tested it, but I guess the "http://" part would become "http(s)?://". Note that this would change the matching positions of the provider and id.
Just in case here is a php version
/*
* parseVideo
* #param (string) $url
* mi-ca.ch 27.05.2016
* parse vimeo & youtube id
* format url for iframe embed
* https://regex101.com/r/lA0fP4/1
*/
function parseVideo($url) {
$re = "/(http:|https:|)\\/\\/(player.|www.)?(vimeo\\.com|youtu(be\\.com|\\.be|be\\.googleapis\\.com))\\/(video\\/|embed\\/|watch\\?v=|v\\/)?([A-Za-z0-9._%-]*)(\\&\\S+)?/";
preg_match($re, $url, $matches);
if(strrpos($matches[3],'youtu')>-1){
$type='youtube';
$src='https://www.youtube.com/embed/'.$matches[6];
}else if(strrpos($matches[3],'vimeo')>-1){
$type="vimeo";
$src='https://player.vimeo.com/video/'.$matches[6];
}else{
return false;
}
return array(
'type' => $type // return youtube or vimeo
,'id' => $matches[6] // return the video id
,'src' => $src // return the src for iframe embed
);
}
I had a task to enable adding a dropbox videos. So the same input should take href, check it and transform to the playable link which I can then insert in .
const getPlayableUrl = (url) => {
// Check youtube and vimeo
let firstCheck = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
if (firstCheck) {
if (RegExp.$3.indexOf('youtu') > -1) {
return "//www.youtube.com/embed/" + RegExp.$6;
} else if (RegExp.$3.indexOf('vimeo') > -1) {
return 'https://player.vimeo.com/video/' + RegExp.$6
}
} else {
// Check dropbox
let candidate = ''
if (url.indexOf('.mp4') !== -1) {
candidate = url.slice(0, url.indexOf('.mp4') + 4)
} else if (url.indexOf('.m4v') !== -1) {
candidate = url.slice(0, url.indexOf('.m4v') + 4)
} else if (url.indexOf('.webm') !== -1) {
candidate = url.slice(0, url.indexOf('.webm') + 5)
}
let secondCheck = candidate.match(/(http:|https:|)\/\/(player.|www.)?(dropbox\.com)\/(s\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*\/)?(.*)/);
if (secondCheck) {
return 'https://dropbox.com/' + RegExp.$4 + RegExp.$5 + RegExp.$6 + '?raw=1'
} else {
throw Error("Not supported video resource.");
}
}
}
I based myself the previous answers but I needed more out the regex.
Maybe it worked in 2011 but in 2019 the syntax has changed a bit. So this is a refresh.
The regex will allow us to detect weather the url is Youtube or Vimeo.
I've added Capture group to easily retrieve the videoID.
If ran with Case insensitive setting please remove the (?i).
(?:(?i)(?:https:|http:)?\/\/)?(?:(?i)(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+))
https://regex101.com/r/PVdjg0/2
Use this Regex devs:This works like Makhan(react js,Javascript)
^(http\:\/\/|https\:\/\/)?((www\.)?(vimeo\.com\/)([0-9]+)$)|((www\.youtube\.com|youtu\.be)\/.+$)
I'm using this regular expression for detect if an url ends with a jpg :
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|]*^\.jpg)/ig;
it detects the url : e.g. http://www.blabla.com/sdsd.jpg
but now i want to detect that the url doesn't ends with an jpg extension, i try with this :
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|]*[^\.jpg]\b)/ig;
but only get http://www.blabla.com/sdsd
then i used this :
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|]*[^\.jpg]$)/ig;
it works if the url is alone, but dont work if the text is e.g. :
http://www.blabla.com/sdsd.jpg text
Try using a negative lookahead.
(?!\.jpg)
What you have now, [^\.jpg] is saying "any character BUT a period or the letters j, p, or g".
EDIT Here's an answer using negative look ahead and file extensions.
Update
Knowing this is a "url finder" now, here's a better solution:
// parseUri 1.2.2
// (c) Steven Levithan <stevenlevithan.com>
// MIT License
// --- http://blog.stevenlevithan.com/archives/parseuri
function parseUri (str) {
var o = parseUri.options,
m = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
uri = {},
i = 14;
while (i--) uri[o.key[i]] = m[i] || "";
uri[o.q.name] = {};
uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
if ($1) uri[o.q.name][$1] = $2;
});
return uri;
};
parseUri.options = {
strictMode: false,
key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
q: {
name: "queryKey",
parser: /(?:^|&)([^&=]*)=?([^&]*)/g
},
parser: {
strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:#]*)(?::([^:#]*))?)?#)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
loose: /^(?:(?![^:#]+:[^:#\/]*#)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:#]*)(?::([^:#]*))?)?#)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
}
};//end parseUri
function convertUrls(element){
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig
element.innerHTML = element.innerHTML.replace(urlRegex,function(url){
if (parseUri(url).file.match(/\.(jpg|png|gif|bmp)$/i))
return '<img src="'+url+'" alt="'+url+'" />';
return ''+url+'';
});
}
I used a parseUri method and a slightly different RegEx for detecting the links. Between the two, you can go through and replace the links within an element with either a link or the image equivalent.
Note that my version checks most images types using /\.(jpg|png|gif|bmp)$/i, however this can be altered to explicitly capture jpg using /\.jpg$/i. A demo can be found here.
The usage should be pretty straight forward, pass the function an HTML element you want parsed. You can capture it using any number of javascript methods (getElementByID, getElementsByTagName, ...). Hand it off to this function, and it will take care of the rest.
You can also alter it and add it tot he string protoype so it can be called natively. This version could be performed like so:
String.prototype.convertUrls = function(){
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig
return this.replace(urlRegex,function(url){
if (parseUri(url).file.match(/\.(jpg|png|gif|bmp)$/i))
return '<img src="'+url+'" alt="'+url+'" />';
return ''+url+'';
});
}
function convertUrls(element){
element.innerHTML = element.innerHTML.convertUrls();
}
(Note the logic has moved to the prototype function and the element function just calls the new string extension)
This working revision can be found here
Define the URL regex from the RFC 3986 appendix:
function hasJpgExtension(myUrl) {
var urlRegex = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
var match = myUrl.match(urlRegex);
if (!match) { return false; }
Whitelist the protocol
if (!/^https?/i.test(match[2])) { return false; }
Grab the path portion so that you can filter out the query and the fragment.
var path = match[5];
Decode it so to normalize any %-encoded characters in the path.
path = decodeURIComponenent(path);
And finally, check that it ends with the appropriate extension:
return /\.jpg$/i.test(path);
}
This is a simple solution from the post of #Brad and don't need the parseUri function:
function convertUrls(text){
var urlRegex = /((\b(https?|ftp|file):\/\/|www)[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
var result = text.replace(urlRegex,function(url){
if (url.match(/\.(jpg|png|gif|bmp)$/i))
return '<img width="185" src="'+url+'" alt="'+url+'" />';
else if(url.match(/^(www)/i))
return ''+url+'';
return ''+url+'';
});
return result;
}
The same result :
http://jsfiddle.net/dnielF/CC9Va/
I don't know if this is the best solution but works for me :D thanks !
Generally you can check all the extensions with some like (for pictures):
([^\s]+(\.(?i)(jpg|jpeg|png|gif|bmp))$)