Логика регулярных выражений

[Overflow]

Товарищи форумчане! Помогите, пожалуйста, понять логику работы регулярки на данном примере:

На вход подается ссылка на картинку определенного формата. На выходе должна выйти ссылка без протокола и query_string.

Пример: подаем http://site.ru/folder/picture.jpg?query&string или https://site.ru/folder/picture.jpg
На выходе получаем site.ru/folder/picture.jpg

Код:

if(document.getElementById('element_input').value.toLowerCase().indexOf('://', 0) > -1){
	picture = document.getElementById('element_input').value.match(/\:\/\/(.+?)\.(jpg|jpeg|png|bmp|gif)/i);
}else{
	picture = document.getElementById('element_input').value.match(/(.+?)\.(jpg|jpeg|png|bmp|gif)/i);
}

// на выходе picture[1] + "." + picture[2]

Да, этот код рабочий, но.. можно его как-то усовершенствовать убрав поиск через indexOf и переместив его в само регулярное выражение?
Попытки вроде

picture = document.getElementById('element_input').value.match(/(?:\:\/\/)??(.+?)\.(jpg|jpeg|png|bmp|gif)/i);

возвращают picture[1] вместе с возможным ://, а так быть не должно (должна быть "чистая" ссылка на картинку).

Собственно вопросы:
1. Почему picture[1] захватывает ://?
2. Как это исправить?

Заранее спасибо!

[Deff]

Overflow,
Приведите реальные примеры двух трёх входных строк и что желаем видеть на выходе

[Overflow]

input: http://cs315420.userapi.com/v3154206...u-OE.jpg?ololo
output: cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg

input: https://cs315420.userapi.com/v315420...?ololo&trololo
output: cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg

input: cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo
output: cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg

input: cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jPg
output: cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jPg

т.е. на входе любая ссылка на любую картинку в интернете. Ссылка обрабатывается и сохраняется, а протокол и всё, что после формата - откидываются.

[Deff]

<script type="text/javascript">
function InputTST(select) {
 var str = document.getElementById(select).value;
 str2=str.replace(/\s*(?:http:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2'); //
 if(RegExp["$2"]!='') return str2;
 return false;
}
</script>
<input size="73" id="element_input" type="text" value=" cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo" /> <button type="button" onclick="alert('\''+InputTST('element_input')+'\'')">Test</button>

[Overflow]

Спасибо за ответ! Не подскажите, почему часть с http

str2=str.replace(/(?:http:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2'); //

работает на ура, а с отслеживанием "://" без символов букв

str2=str.replace(/(?:\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2'); //

"бракует" ("http://" помещается в $1, первая группировка её не видит)? Интересует именно почему :// игнорируются первым группированием, а если группировать http:// - то нет.

[Deff]

"бракует" ("http://" помещается в $1, первая группировка её не видит)? Интересует именно почему :// игнорируются первым группированием, а если группировать http:// - то нет.

Ничо не понял - приведите входные варианты и выходные

Может так ?
str2=str.replace(/(?:.*?:?\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2'); //

[devote]

"бракует" ("http://" помещается в $1, первая группировка её не видит)? Интересует именно почему :// игнорируются первым группированием, а если группировать http:// - то нет.

потому что вы делаете replace а не match

var a = "http://cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo";
alert( a.replace( /(?:http(?:s)?)?(?::\/\/)?(.*?\.(?:jpg|jpeg|png|bmp|gif)).*/gi, '$1' ) );

var a = "https://cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo";
alert( a.replace( /(?:http(?:s)?)?(?::\/\/)?(.*?\.(?:jpg|jpeg|png|bmp|gif)).*/gi, '$1' ) );

var a = "://cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo";
alert( a.replace( /(?:http(?:s)?)?(?::\/\/)?(.*?\.(?:jpg|jpeg|png|bmp|gif)).*/gi, '$1' ) );

var a = "cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo";
alert( a.replace( /(?:http(?:s)?)?(?::\/\/)?(.*?\.(?:jpg|jpeg|png|bmp|gif)).*/gi, '$1' ) );

[Overflow]

devote, Deff, спасибо за ответы!

потому что вы делаете replace а не match

Пример:

<script type="text/javascript">
function InputTST(select) {
 var str = document.getElementById(select).value;
str2=str.replace(/(?:.*\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2');
//str2=str.replace(/(?:\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2');

 if(RegExp["$2"]!='') return str2;
 return false;
}
</script>
<input size="73" id="element_input" type="text" value="https://cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo" /> <button type="button" onclick="alert('\''+InputTST('element_input')+'\'')">Test</button>

Но ведь если убрать .* в первой группе регулярка будет работать только тогда, когда :// будут в начале строки. Почему так? Ведь я /^ в начале не указывал? Пример:

<script type="text/javascript">
function InputTST(select) {
 var str = document.getElementById(select).value;
//str2=str.replace(/(?:.*\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2');
str2=str.replace(/(?:\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2');

 if(RegExp["$2"]!='') return str2;
 return false;
}
</script>
<input size="73" id="element_input" type="text" value="https://cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo" /> <button type="button" onclick="alert('\''+InputTST('element_input')+'\'')">Test</button>

Аналогично и с mathes (что я делаю не так?):

<script type="text/javascript">
function InputTST(select) {
 var str = document.getElementById(select).value;
//str2=str.replace(/(?:.*\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2'); //
//str2=str.replace(/(?:\:\/\/)?(.*)\.(jpg|jpeg|png|bmp|gif).*$/ig,'$1.$2'); //
var matches = str.match(/(?:\:\/\/)?(.+)\.(jpg|jpeg|png|bmp|gif)/i);

return matches[2] ? (matches[1] + "." + matches[2]) : false;
}
</script>
<input size="73" id="element_input" type="text" value="https://cs315420.userapi.com/v315420616/2bf/V7iMAyfu-OE.jpg?ololo&trololo" /> <button type="button" onclick="alert('\''+InputTST('element_input')+'\'')">Test</button>

[Deff]

Overflow,
У devote, правильный вариант, посколь я тещу лишь наличие расширение, а devote выдаёт строку - если есть и расширения и начальные варианты строки

[nerv_]

Да, этот код рабочий, но.. можно его как-то усовершенствовать убрав поиск через indexOf и переместив его в само регулярное выражение?

Зачем регулярное выражение, если можно, как Вы уже обозначили "дешево и сердито"?