Как я могу использовать javascript для преобразования относительных атрибутов href в абсолютные пути?

Question

У меня есть шаблон, который снимается с экрана от стороннего поставщика, и мне необходимо указывать абсолютные пути в навигации, чтобы размещенный извне контент правильно связывался с нашим сайтом.

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

Прямо сейчас все ссылки ссылаются на относительные пути к корню.

Например

<a href="/">Home</a>
<a href="/news/">News</a>
<a href="/media/">Media</a>
<a href="/other/">Other</a>

Мне нужен простой способ (желательно с jquery) для добавления "http://www.domain.com" к каждой из этих ссылок.

Answer 1

Обратите внимание, что объект jQuery $ ("a"). Attr ("href") не равен $ ("a"). Get (0) .href?

$("a").each(function() {
   alert(this.href);
   $(this).attr("href") = this.href;
});

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

Answer 2

$('a').attr('href', 'http://www.domain.com'+$(this).attr('href'));

Answer 3

Все очень просто:

$('a').each(function(){$(this).attr('href',this.href);});

Когда вы читаете свойство href HTMLAnchorElement , вы получаете абсолютный путь, поэтому вы можете перезаписать его с помощью метода attr () JQuery.

Answer 4

вам не нужен jquery для такой простой функции ....

var elements = document.getElementsByTagName("a");
var eachLink;
for (eachLink in elements) {
 var relativeLink = eachLink.href;
 var absoluetLink = ["http://",domainName,"relativeLink"];
 eachLink.href = absoluteLink.join("");
}

что-то вроде этого должно работать, и оно работает намного быстрее, и вам не нужно загружать всю библиотеку jquery только для запуска 6 строк кода: P

Answer 5

Я не рекомендую использовать javascript для решения этой проблемы. Это должно быть решено в шаблоне страницы. Тем не менее, если вы все еще хотите решение jquery, то здесь вы идете. Предполагая, что эти ссылки имеют определенный класс, который отличает их от внутренних ссылок:

$('a.external').each(function() {
    $(this).attr('href', domain_name + $(this).attr('href'));
})

Answer 6

Я заметил, что все решения здесь работают только с атрибутами href, которые начинаются с символа "/". Если вы хотите что-то более надежное, вы можете попробовать библиотеку js-uri . Выглядит круто, но я сам не пробовал, поэтому не знаю, насколько он глючит.