Делая ссылки кликабельны в JavaScript?

есть ли простой способ превратить строку из 

Then go to http:/example.com/ and foo the bar!

на

Then go to <a href="http://example.com">example.com</a> and foo the bar!

в Javascript на существующей HTML-странице?

7
formatting javascript text-parsing

2 ответов

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

node.innerHTML = node.innerHTML.replace(/(http:\/\/[^\s]+)/g, "<a href=''></a>")

(мое регулярное выражение немного ржавое, поэтому вам может понадобиться играть с синтаксисом). Это простой случай. Вы должны быть осторожны с инъекцией скрипта здесь (например, если у меня есть http://"><script>doevil()</script>). Один из способов обойти это-использовать функцию построения ссылок:

node.innerHTML = node.innerHTML.replace(/ ... /g, buildLink());

здесь buildLink() можете проверить, чтобы убедиться, что URL не содержит ничего вредоносного.

однако метод RegEx-innerHTML не будет работать очень хорошо на больших текстовых телах, поскольку он разрывает и перестраивает все содержимое HTML узла. Вы также можете достичь этого с помощью методов DOM:

  • найти ссылку на текстовый узел
  • в содержимом найдите начальный и конечный индексы URL
  • использовать splitText() метод разделения узла на 3: перед, ссылка, после
  • создать <a> узел href это то же самое, что и ссылка
  • использовать insertBefore() вставить это <a> узел перед ссылкой
  • использовать appendChild() чтобы переместить ссылку в <a> узел
8

во-первых, "внутри HTML-страницы" сложно, потому что "страница" на самом деле является деревом DOM (которое частично состоит из текстовых узлов и в основном состоит из HTML-элементов).

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

// we'll assume this is the string of a content-rich text node
var textNode = document.getElementById('contentNode');
textNode.innerHTML = textNode.innerHTML.replace(/(\s)(http:\/\/[^\s]+)(\s)/g, '<a href=""></a>');

BTW: здесь есть последствия для безопасности. Если вы создаете ссылки из нестерилизованного текста, существует возможность XSS.

3