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 и может использоваться с элементами, еще даже не прикрепленными к документу. Еще одним улучшением может быть добавление проверки, гарантирующей, что ни один родительский узел в дереве не является привязкой, но это может быть излишним.

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

Похожие темы	Дата
[Udemy] Практический Vue.js с нуля до траблшутинга (2019)	19.12.2024, 05:12
Вопрос по коду Javascript для обратного подсчета	19.12.2024, 05:12
Выпущены eSmooth.js и elementals 2.0 RC 2	19.12.2024, 05:12
Javascript – диалоговое окно подтверждения после отправки формы	19.12.2024, 05:12
Умножение не работает	19.12.2024, 05:12
Пользовательский заголовок не работает	19.12.2024, 05:12
FormData пусто	19.12.2024, 05:12
Заключите ключевые слова в двойные элементы	19.12.2024, 05:12
[Lynda.com] Основной курс по JavaScript	19.12.2024, 05:12
Современный учебник JavaScript - Кантор (2015)	19.12.2024, 05:12

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

Aveave

Dyx86

StR1K33

Alex641

I AM

Интересно