Подняться наверх

JavaScript ссылка: из HTML-разметки

You are here

Итак, сегодня мы с вами, читатели, научимся автоматически преобразовывать/делать все гиперссылки, написанные обычным текстом посреди остального содержимого веб-страницы, в активные вполне кликабельные линки с помощью нехитрой JavaScript функции с использованием небольшого регулярного выражения. Бонусом во вложении к материалу идет миниатюрный архив с примером, который можно так сказать "пощупать вживую". Далее просто смотрим/читаем пример сниппета.

Преобразование текста в ссылки на JavaScript:

function plain_to_link(text) {
  /* Получаем содержимое веб-страницы: */
  var content = document.body.innerHTML;
 
  /* Составляем небольшое регулярное выражение: */
  content = content.replace(/((https?\:\/\/|ftp\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi, function(url) {
    nice = url;
    if( url.match('^https?:\/\/') )
      nice = nice.replace(/^https?:\/\//i,'')
    else
      url = 'http://' + url;
 
  /* Вовзращаем кликабельный урл, завернутый в nofollow и яндексовый noindex: */
    return '<noindex><a target="_blank" rel="nofollow" href="'+ url +'">'+ nice.replace(/^www./i,'') +'</a></noindex>';
  });
 
  /* Заменяем исходный HTML-код на наш, пропущенный черех самописный фильтр. */
  document.body.innerHTML = content;
}
 
window.onload = plain_to_link;

Теперь я пожалуй ещё раз перечислю некоторые шаги работы вышеприведенного кода:

  1. Получаем содержимое веб-страницы - document.body.innerHTML.
  2. Составляем небольшое регулярное выражение для распознавания ссылок.
  3. Вовзращаем кликабельные урлы, завернутые в nofollow и яндексовые noindex.
  4. Заменяем исходный HTML-код на наш, пропущенный черех самописный фильтр.
  5. Навешиваем выполнение скрипта - window.onload = plain_to_link.

Пример подключения скрипта к веб-странице:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Распознаем гиперссылки на JavaScript | http://www.sooource.net</title>
  <script src="plain-to-link.js"></script>
</head>
<body>
  <p>Какой-то там текст и &laquo;http://www.sooource.net&raquo;  - это ссылка.</p>
  <p>Ещё &laquo;https://webmaster.yandex.ru&raquo;  - это тоже линк.</p>
  <p>Да и &laquo;http://ftp.drupal.org/files/projects/token-7.x-1.4.tar.gz&raquo;  - тот ещё урл.</p>
  <p>Да и &laquo;ftp://example:password@example.ftp.narod.ru&raquo;  - так, напоследок.</p>
</body>
</html>
К статье прилагаю: 
AttachmentSize
plain_to_link.zip1.52 KB

Опрос

Что хотим видеть

Спонсоры

Яндекс.Метрика

Использовано памяти на 4.576mb