Создание ссылок, активируемых по щелчку в 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?
2 ответа
Да. Самый простой способ - использовать регулярные выражения для замены элементов, которые выглядят как ссылки, на их связанные эквиваленты. Что-то вроде:
node.innerHTML = node.innerHTML.replace(/(http:\/\/[^\s]+)/g, "<a href='$1'>$1</a>")
(мой RegEx немного устарел, поэтому вам, возможно, придется поиграть с синтаксисом). Это просто случай. Здесь следует опасаться внедрения сценария (например, если у меня есть http: // "> ). Один из способов обойти это - использовать ссылку функция построения:
node.innerHTML = node.innerHTML.replace(/ ... /g, buildLink($1));
Где buildLink () может проверить, не содержит ли URL ничего вредоносного.
Однако метод RegEx-innerHTML не будет работать очень хорошо с большими объемами текста хотя, поскольку он разрушает и перестраивает все HTML-содержимое узла. Вы также можете добиться этого с помощью методов DOM:
- Найдите ссылку на текстовый узел
- Найдите в содержимом начальный и конечный индексы URL
- Используйте метод
splitText (), чтобы разделить узел на 3: до, ссылка, после - Создайте узел
hrefэто то же самое, что и ссылка - . Используйте
insertBefore (), чтобы вставить этот - Используйте
appendChild ()для перемещения ссылка на узел
Во-первых, «внутри 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, '$1<a href="$2">$2</a>$3');
BTW: здесь есть последствия для безопасности. Если вы генерируете ссылки из нестерилизованного текста, есть возможность XSS.