Получить имя файла и расширение по его ссылке в jQuery

Средствами php можно получить имя файла из ссылки. Чаще всего для этого используется функция basename. В jQuery я такого не встречал, поэтому решил сделать такую функцию.

Она будет называться getname() и сможет работать в 3 режимах:

  • имя файла с расширением banner.jpg (mode='file')
  • расширение файла jpg (mode='extf')
  • имя файла без расширения banner (mode='name')

Принцип работы getname() основывается на регулярных выражениях. Код функции такой:

function getname(path, mode='file') {
var b_file = path.replace(/^.*[\/\\]/ig, ''); //здесь получили файл с расширением: banner.jpg
var b_extf = b_file.replace(/^.*[\.]/ig, ''); //здесь получили расширение из файла: jpg
var b_name = b_file.replace(/^(.*)[\.].*/ig, '$1'); //здесь получили файл без расширения: banner
if(mode=='file') return b_file; //banner.jpg
else if(mode=='name') return b_name; //banner
else if(mode=='extf') return b_extf; //jpg
}

В комментариях подробно описано для чего нужна каждая строка. Но в программировании регулярные выражения всегда вызывают сложности. Объясню каждую строку с регуляркой.

В строке с var b_file мы заменяем на пустоту любые символы вначале строки, до тех пор пока не встретим последний символ / или \ - после которого обычно идет имя файла. Замену делаем в ссылке, которую предоставляем, как входной параметр на функцию.

В строке с var b_extf мы также заменяем любой символ на пустоту, пока не встретим последнюю точку в названии файла.

В строке var b_name принцип замены тот же. Однако мы выделили имя файла без расширения в круглые скобки и таким образом запомнили его. А $1 позволяет вывести название обратно.

Как пользоваться функцией?

Просто выставляем нужный режим и ставим путь на файл, с которым требуется работать. Для примера перед кодом создайте <p class="rez"></p> и используйте строки, чтобы посмотреть, как все работает:

<script>
//Примеры:
$('.rez').text($('.rez').text() + ' ' + getname('images/14/t.ree/WFX809.2.jpg', 'extf')); //jpg
$('.rez').text($('.rez').text() + ' ' + getname('images/14/t.ree/вордс.doc', 'name')); //вордс
$('.rez').text($('.rez').text() + ' ' + getname('images/14/t.ree/вордс.doc', 'file')); //вордс.doc
$('.rez').text($('.rez').text() + ' ' + getname('banner.jpg', 'file')); //banner.jpg
$('.rez').text($('.rez').text() + ' ' + getname('http://saits.ru/images/img.2.png', 'file')); //img.2.png
$('.rez').text($('.rez').text() + ' ' + getname('http://saits.ru/images/картинка.gif', 'extf')); //gif
</script>

В комментариях к строкам вы можете увидеть, что получится на выходе каждого примера.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: