Тест, если ссылки являются внешними с jQuery / JavaScript?
Как я тестирую, чтобы видеть, являются ли ссылки внешними или внутренними?Пожалуйста, примите во внимание:
- Я не могу трудно кодировать локальный домен.
- Я не могу протестировать на "http". Я мог так же, как легко связываться со своим собственным сайтом с http абсолютной ссылкой.
- Я хочу использовать jQuery / JavaScript, не CSS.
Я подозреваю, что ответ заключается где-нибудь в location.href, но решение уклоняется от меня.
Спасибо!
4 ответа
var comp = new RegExp(location.host);
$('a').each(function(){
if(comp.test($(this).attr('href'))){
// a link that contains the current host
$(this).addClass('local');
}
else{
// a link that does not contain the current host
$(this).addClass('external');
}
});
Примечание: это просто быстрый и грязный пример. Соответствует всем ссылкам href = "# anchor" как внешний тоже. Его можно улучшить, выполнив дополнительную проверку RegExp.
Обновление 2016-11-17
Этот вопрос по-прежнему вызывает много трафика, и многие люди сказали мне, что это приемлемое решение несколько раз дает сбой. Как я уже сказал, это был очень быстрый и грязный ответ, чтобы показать основной способ решения этой проблемы. Более сложное решение - использовать свойства, доступные в элементе (привязка). Как @Daved уже указал в этом ответе, ключ заключается в сравнении имени хоста с текущим window.location.hostname . Я бы предпочел сравнить свойства hostname , потому что они никогда не включают порт , который включен в свойство host , если оно отличается от 80.
Итак. начнем:
$( 'a' ).each(function() {
if( location.hostname === this.hostname || !this.hostname.length ) {
$(this).addClass('local');
} else {
$(this).addClass('external');
}
});
Современное состояние:
Array.from( document.querySelectorAll( 'a' ) ).forEach( a => {
a.classList.add( location.hostname === a.hostname || !a.hostname.length ? 'local' : 'external' );
});
var external = RegExp('^((f|ht)tps?:)?//(?!' + location.host + ')');
Использование:
external.test('some url'); // => true or false
Да, я считаю, что вы можете получить текущее доменное имя с помощью location.href. Другая возможность - создать элемент ссылки, установить для src значение / и затем получить канонический URL-адрес (при этом будет получен базовый URL-адрес, если вы его используете, и не обязательно имя домена).
Также см. Этот пост: Получите полный URI из свойства href ссылки
И способ без jQuery
var nodes = document.getElementsByTagName("a"), i = nodes.length;
var regExp = new RegExp("//" + location.host + "($|/)");
while(i--){
var href = nodes[i].href;
var isLocal = (href.substring(0,4) === "http") ? regExp.test(href) : true;
alert(href + " is " + (isLocal ? "local" : "not local"));
}
Все hrefs, не начинающиеся с http (http: //, https: //), автоматически обрабатываются как локальные