Содержание

javascript — Как найти ссылки?

Вопрос задан

Изменён 12 месяцев назад

Просмотрен 3k раза

Есть произвольный текст, некогда введённый пользователем.

Как в автоматическом режиме выделить в нём все гиперссылки?
Какие правила формирования гиперссылок следует учесть?

  • Начинается c протокола: http, https, ftp, ftps.
  • Начинается с www.
  • Начинается с //.
  • Заканчивается пробелом или знаком препинания, кроме открывающейся скобки и точки.
  • Не включает точку, если за ней следует пробельный символ.
  • Не заканчивается закрывающейся скобкой, если содержит парную открывающуюся.

Что ещё следует учесть?

Ссылка никогда не ссылается на тот же самый сайт.

Возможно, есть какие-то распространённые способы выделения ссылок?

PS: Этот вопрос на английском.

  • javascript
  • регулярные-выражения
2

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

Лучше всего- выработать жесткие правила для написания URL, например:

  • ссылка начинается с (?<!\w)(?:https?|goopher|ftp|skype|etc)\/\/:
  • ссылка заканчивается по пробелу, или концу текста
    .+?(?:\s|$)

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

Нельзя сделать хорошо всем и сразу. Сделайте так, как нравится Вам.
Но лучше всего сделайте максимально простую и понятную логику работы, чтобы пользователь всегда четко понимал где будет начало и конец текста, подсвеченного как ссылка. \s]){2,}/gim

Посмотреть, как работает, можно в соседнем вопросе.

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как создать ссылку из строки? — efim360.

ru

Теория

В стандарте ECMAScript есть раздел B — «Additional ECMAScript Features for Web Browsers» (Дополнительные возможности ECMAScript для веб-браузеров). В нём есть подраздел B.2.3 — «Additional Properties of the String.prototype Object» (Дополнительные свойства прототипа объекта String).

В подразделе перечислены дополнительные методы, с которыми JavaScript может работать в браузере со строковым типом данных. Большинство этих методов используют абстрактную операцию «CreateHTML» — по сути оборачивают строку нужной HTML-разметкой.

Для создания ссылок из строк используется дополнительный метод «link(url)«. Подраздел B.2.3.10 String.prototype.link ( url )

 

Видео инструкция

В этом видео приводится пример создания ссылки из строки при помощи JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Практика

Объявим строку и присвоим ей переменную (сохраним в переменную):

var stroka = "Скачать фото"

Результат вывода в консоль браузера:

Переменная stroka со значением — Скачать фото — JavaScript

 

Воспользуемся дополнительным методом «link(url)» и обернём данную строку HTML-элементом <a>:

var newStrLink = stroka.link("efim360.ru")

В качестве параметра url мы передали строковое значение:

efim360.ru

Результат вывода в консоль браузера:

Строку обернули ссылкой и указали атрибут href — JavaScript

Теперь мы обернули строку «Скачать фото» ссылкой и указали HTML-атрибут href. Но это по-прежнему строка JavaScript (не объект элемента).

 

Превращение строки в элемент

Для превращения строки в элемент HTML-разметки (в объект JavaScript) необходимо использовать интерфейс DOMParser. Мы хотим, чтобы браузер увидел объект, а не строку. Так нам будет проще извлекать данные из новых объектов при необходимости.

var newStrObject = new DOMParser().parseFromString(newStrLink, "text/xml").documentElement

Результат вывода в консоль браузера:

Преобразование строки с разметкой в объект с элементом HTML — JavaScript

 

Например теперь мы можем легко получить значение нужного нам атрибута:

Получение значений из HTML-атрибутов — объект JavaScript

 

 

Вывод строки на страницу

Можно вывести результат работы на страницу текущего документа:

document.write(newStrLink)

Результат вывода:

Ссылка из строки на HTML-странице

Мы успешно вывели созданную из строки ссылку на текущую страницу в браузере.

 

Ссылки

JavaScript | Строки (String)

Стандарт DOM — Интерфейс Document — атрибут documentElement

Стандарт ECMAScript — Additional ECMAScript Features for Web Browsers

Стандарт ECMAScript — Additional Properties of the String. prototype Object

Стандарт ECMAScript — String.prototype.link ( url )

 

Что можно и чего нельзя делать со ссылками и JavaScript

Google объясняет, как обеспечить правильную работу ссылок с JavaScript в первом выпуске новой серии Lightning Talks .

Google Lightning Talks — это короткие версии презентаций, которые могли быть представлены на конференциях Google для веб-мастеров по всему миру.

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

Видео из серии Google Lightning Talks планируется публиковать в течение года.

Мартин Сплитт из Google о ссылках и JavaScript

Splitt посвящает первый выпуск Lightning Talks обсуждению «всеми любимой» темы: ссылок.

Более конкретно — ссылки в веб-приложениях JavaScript.

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

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

Ссылки важны для людей и ботов

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

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

В первую очередь – ссылки позволяют поисковым роботам находить другие страницы веб-сайта.

Поисковые роботы обнаруживают и индексируют другие страницы веб-сайта, переходя по ссылкам с одной страницы на другую.

Переходя по ссылкам, сканер получает представление о структуре сайта и информационной архитектуре.

Это полезно для понимания того, какие страницы могут иметь отношение к данной теме.

Связанный: Практическое введение в современный JavaScript для SEO-специалистов

Создание ссылок с помощью JavaScript: что можно и чего нельзя делать

Это особенно верно, когда речь идет о добавлении в ссылку функций JavaScript.

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

Вот что рекомендует Сплитт.

Делайте: будьте прямолинейны

Самый простой способ разместить ссылку на сайте — это использовать тег ahref .

Также можно обновить стандартные ссылки с помощью функций JavaScript, если выполняются некоторые условия.

Примеры прямых ссылок

Не следует: не указывать атрибут ahref

При добавлении функций JavaScript к ссылке можно исключить атрибут ahref

«Это не очень хорошая идея», Сплитт говорит.

Причина этого в том, что ссылка будет работать только тогда, когда JavaScript работает правильно.

Без атрибута ahref сканеры не смогут определить, куда ведет ссылка, потому что сканер не запускает JavaScript.

Не следует: использовать псевдо-URL-адреса

Также не помогает добавление атрибута ahref без полезного URL-адреса или с «псевдо-URL», как в примере ниже:

Результат такой же, как ссылка без атрибута ahref, что означает, что это не очень хорошая идея.

Не используйте кнопки

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

Практическое правило: если ссылка вызывает какое-либо действие на текущей странице, вероятно, это должна быть кнопка.

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

Не следует: полагаться на обработчики кликов

Владельцы сайтов также не должны имитировать ссылки с помощью других элементов HTML и, например, с помощью обработчика кликов в JavaScript.

Это нарушает встроенные специальные возможности и не является хорошей идеей.

Делать: использовать семантический HTML

Суть всего этого — использовать семантическую HTML-разметку и указывать ссылку на правильный URL.

Какой URL правильный? Это объясняется в следующем разделе.

Использование «правильных» URL-адресов

Эти URL-адреса являются типичными примерами того, что считается «правильным URL-адресом»:

Это правильные URL-адреса, поскольку они содержат следующие атрибуты:

  • Протокол А
  • Хост
  • Путь к определенному элементу контента
  • Идентификатор фрагмента (необязательно)

Связанный: SEO и JavaScript: хорошее, плохое и неопределенность

Остерегайтесь идентификаторов фрагментов

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

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

Поисковые роботы не будут переходить по ссылкам, поэтому они не смогут понять веб-приложение.

Вкратце

Вот основные выводы из первой части Google Lightning Talks:

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

Часто задаваемые вопросы

Каких ошибок следует избегать при создании ссылок JavaScript?

  • Не упускайте атрибут ahref.
  • Не используйте псевдо-URL.
  • Не полагайтесь на обработчики кликов.
  • Не используйте кнопки.

Сканирует ли Google идентификаторы фрагментов?

Учитывая, что идентификаторы фрагментов ( href=»#fragment-identifier» ) являются необязательными и указывают на местоположения в одном и том же фрагменте контента, поисковые роботы игнорируют их.

Категория Новости SEO

Правильный способ применения JavaScript к вашим ссылкам для SEO

Мартин Сплитт из Google объясняет, почему идентификаторы фрагментов не сканируются, и важность атрибутов href.

Джордж Нгуен, 29 апреля 2020 г., 14:01 | Время чтения: 2 минуты

«Используйте правильную разметку ссылок, не используйте URL-адреса фрагментов для ссылок, которые вы хотите, чтобы поисковые роботы обнаруживали и переходили по ним, и вы должны создавать веб-сайты, которые хорошо работают с JavaScript, и ссылки будут найдены», Мартин Сплитт, защитник разработчиков в Google, подытоженный на конференции Google для веб-мастеров Lightning Talk в среду.

Правильный способ создания ссылок. Использование HTML-тега с URL-адресом назначения в атрибуте href — самый простой способ создать ссылку. Например, ссылка.

Вы также можете добавить к ссылке JavaScript, что позволит вам обновить ее функциональность. Одним из примеров этого может быть, когда пользователь щелкает всплывающее гамбургер-меню на одной из ваших страниц — JavaScript можно использовать для перехвата href и отображения скрытого гамбургер-меню.

Не упускайте атрибут href. Может возникнуть соблазн удалить атрибут href и «очистить» ваш код, но это означает, что ссылка будет работать только в том случае, если ваш JavaScript также работает правильно. Сканеры получают доступ только к содержимому, на которое указывает атрибут href, и в случае ошибки пользователи не могут получить доступ к содержимому, на которое указывает JavaScript.

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

No related posts.