Блог

Главная - Вопросы по программированию - JS: извлечение URL-адресов атрибутов href и src из DOM как абсолютных

JS: извлечение URL-адресов атрибутов href и src из DOM как абсолютных

#javascript #jquery #regex #path #absolute-path

#javascript #jquery #регулярное выражение #путь #абсолютный путь

Вопрос:

Я использую jQuery для извлечения src и href из элементов в DOM следующим образом:

 var mysrc;
$('img[src]').each(function (index) {
   mysrc = $(this).attr('src');
   // convert relative path to absolute url
});

Однако многие из этих путей к изображениям или в ссылке href являются относительными, а не абсолютными. Иногда они начинаются с веб-корня следующим образом: /blah/img.jpg и что-то они идут вверх или вниз по одному каталогу: ../blah/img.jpg .
Я хотел бы сделать все эти пути абсолютными URL-адресами, и я не нашел скрипт для этого. Я знаю, как извлечь хост данной страницы из местоположения, но тогда мне не хватает всей логики, которая преобразовала бы эти относительные пути в абсолютные URL-адреса. Любая идея, где я мог бы найти что-то для этого в Javascript / jQuery или как мне следует поступить.

Спасибо за вашу помощь,

Ответ №1:

.prop() возвращает вычисленное значение свойства, то есть абсолютный путь.
Вместо использования метода jQuery вы также можете использовать обычный this.src .

 $('img[src]').each(function (index) {
   // var mysrc = $(this).prop('src');  //<-- jQuery
   var mysrc = this.src;
   // Why do you want to get the absolute path, by the way?
});

Комментарии:

1. Круто! Спасибо. На самом деле обнаружил, что это также будет работать: $(‘#your_img’).get(0).src — но это, вероятно, то же самое, правильно?

2. @Loic. .get(0) возвращает первый соответствующий элемент DOM объекта jQuery. Итак, $(this).get(0) === this .

Ответ №2:

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

В JSP вы можете получить контекст, подобный этому:

var ContextPath = «<%=request.getContextPath()%>»;

другие серверные языки должны иметь аналогичные конструкции. Имея контекст, вы могли бы сформировать абсолютный путь, например

Абсолютный путь = окно.location — ContextPath relativeURL;

итак, если ваш URL-адрес

http://mysite.com/foo/bar и контекст таков http://mysite.com/foo / и относительный путь — это «../somedir/mypic.jpg » тогда абсолютный путь был бы

/bar/../somedir/mypic.jpg