Linkify (обычный URL-адрес для ссылки) на основе размера окна

aveave

Всем привет,

это то, что я хотел бы сделать

1. когда размер окна < 1000, измените любой текстовый URL-адрес на кликабельный.

2. когда размер окна > 1000, измените любой простой текстовый URL-адрес на кликабельный, заменив его словом «Ссылка».

Я попробовал, но, кажется, где-то не получилось!

Кто-нибудь может пролить свет?

Спасибо

HTML

 <html>


<head>


<script src="[URL='https://lumtu.com/yti/auAAuanNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMy4xLjx4y']https://code.jquery.com/jquery-3.1.0.js[/URL]"></script>


<script>$(document).ready(function() {


function checkWidth() {


var windowSize = $(window).width();


if (windowSize < 1000) {


$('div').each(function(){ $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') ); });


} //make plain text url clickable


else if (windowSize < 1000) {


$('div').each(function(){ $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="Link">Link</a> ') ); });


} //convert plain text to clickable word "Link"


}


checkWidth();


$(window).resize(checkWidth);


$(window).onload(checkWidth);


});


</script>


</head>


<body>


<div>[URL='https://lumtu.com/yti/bwbbwbS9odHRwczovL2dvb2dsZS5jSZs']https://www.google.com/[/URL]</div>


<div>[URL='https://lumtu.com/yti/bvNNvbS9odHRwczovL3lhaG9vLmv9G']https://www.yahoo.com/[/URL]</div>


</body>


</html>

HTML:

dyx86

Просто ради смеха я подчистил и обновил скрипт, удалил рекурсивный вызов и добавил еще несколько функций. Полный код/живая демонстрация здесь:
http://www.cutcodedown.com/for_others/7643sfsag6/

Гораздо более чистая и полезная реализация.

stR1K33

Хорошее решение от @jakecigar на форумах jquery. HTML:

 $(function() {

$('div').each(function() {

$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a class=abbr href="$1">$1</a> '));

});
})

HTML: CSS:

 @media only screen and (max-width: 1000px) { .abbr { font-size:0; text-decoration:none; } .abbr:after { display: inline; font-size:16px; content: "link"; color:black; } }

Код (CSS): JS:

 <div>[URL='https://lumtu.com/yti/bwbbwbS9odHRwczovL2dvb2dsZS5jSZs']https://www.google.com/[/URL]</div> <div>[URL='https://lumtu.com/yti/bvNNvbS9odHRwczovL3lhaG9vLmv9G']https://www.yahoo.com/[/URL]</div>

Код (JavaScript):

Alex641

С этим кодом МНОГО проблем, чего и следовало ожидать, учитывая крушение поезда умственного ослабления, которым является jQuery.

Помимо очевидного проникновения в действующий DOM с помощью внутреннего HTML, вызывающего повторный анализ ВСЕЙ страницы, у вас есть то, что он фактически перехватывает СУЩЕСТВУЮЩИЕ привязки, связывающиеся с ними, если они присутствуют в вашем целевом DIV.

Он также анализирует ВЕСЬ HTML-код дочернего элемента, а не просто изолирует внутри него текстовые узлы, и именно это и должно быть в идеале. Это ловушка «ложной простоты», в которую jQuery обманывает людей, поскольку из-за нее «настолько просто» можно совершенно запутаться.

так что давайте отбросим jQuery на обочину, воспользуемся фрагментом документа для анализа только текстовых узлов и пройдите по DOM, чтобы получить указанные узлы, используя методологию DOM для выполнения работы! Для его запуска вам следует вызвать метод autoLinker.parse этого объекта.

autoLinker.htmlParse — это внутренняя функция, позволяющая превратить замененную разметку в структуру DOM ОТ действующей DOM, где это можно сделать быстрее и с меньшим объемом памяти, вместо того, чтобы переносить ее на живую страницу!

 
autoLinker.parse(document.body);

Код (разметка): Имейте в виду, это не будет автоматически применяться только к вашему DIV, вам придется это реализовать - но теперь можно безопасно применить это ко всему телу документа!

  var autoLinker = { htmlParse : function(code) { var body = document.implementation.createHTMLDocument('').body; body.innerHTML = code; return body; }, parse : function(e) { if ((e.nodeType != 1) || !e.firstChild) return; switch (e.tagName.toLowerCase()) { case 'a': case 'script': case 'style': return; } e = e.firstChild; do switch (e.nodeType) { case 3 : var replace = e.nodeValue.replace(this.uriRegex, this.uriReplace), walk; if ( (replace !== e.nodeValue) && (walk = this.htmlParse(replace).firstChild) ) { // and people say you can't replace a textnode with multiple DOM elements do { e.parentNode.insertBefore(walk.cloneNode(true), e); } while (walk = walk.nextSibling); e.parentNode.removeChild(e); } break; case 1: this.parse(e); } while (e = e.nextSibling); }, uriRegex : /((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, uriReplace : '<a class="autoLinked" href="$1">$1</a>' }

Код (разметка): Это огромное улучшение.

jQuery — даже когда он «экономит» ваш код, на самом деле это не так… Смейтесь, это может работать даже быстрее.

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

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

Похожие темы	Дата
[дмитрий Валак] Javascript Для Верстальщика (2016)	19.10.2024, 18:10
[Joe Chellman] Изучение языка JavaScript / Learning the JavaScript Language (2019) PCRec [H.264/720p-LQ] [EN]	19.10.2024, 18:10
[специалист] Эксперт По Программированию На Javascript	19.10.2024, 18:10
[WebForMySelf] FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6	19.10.2024, 18:10
Javascript advanced от cyberbionic	19.10.2024, 18:10
Создание интерактивной формы	19.10.2024, 18:10
Сергей Швайцер - JQuery (2014)	19.10.2024, 18:10
Node.js Серверное программирование на JavaScript - Geekbrains (2018)	19.10.2024, 18:10
React.js для начинающих - Пацианский (2016)	19.10.2024, 18:10
Javascript: Понимание Dom-Модели (Rus) - Линда.ком	19.10.2024, 18:10

Linkify (обычный URL-адрес для ссылки) на основе размера окна

aveave

dyx86

stR1K33

Alex641

I AM

Интересно