Tworzenie linków klikalnych w JavaScript?

Question

Czy istnieje prosty sposób na obrócenie ciąg z

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

do

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

w JavaScript w ramach istniejącej strony HTML?

Answer 1

Tak. Najprostszym sposobem jest użycie wyrażeń regularnych do zastąpienia rzeczy, które wyglądają jak link do ich powiązanych odpowiedników. Coś jak:

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

(mój RegEx jest trochę zardzewiały, więc być może będziesz musiał grać ze składnią). To tylko prosty przypadek. Musisz uważać na wtrysk skryptu tutaj (na przykład, jeśli mam http://"><script>doevil()</script>). Jednym ze sposobów obejścia tego problemu jest użycie funkcji link budynku:

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

Gdzie buildLink() może sprawdzić, czy adres URL nie zawiera niczego szkodliwego.

Jednak metoda RegEx-innerHTML nie będzie działać zbyt dobrze na dużych ciałach tekstu, ponieważ odrywa i odbudowuje całą zawartość HTML węzła. Można to osiągnąć za pomocą metod DOM, a także: odniesienie

• Znajdź, aby węzła tekstowego
• w treści, znaleźć rozpoczęcia i indeksy końcu adresu URL
• Korzystanie splitText() metoda podzielić węzeł na 3: przed, link, po
• Załóż <a> węzeł z href, która jest taka sama jak w przypadku łącza
• Korzystanie insertBefore() wstawić ten węzeł <a> przed linkiem
• Zastosowanie appendChild() przenieść link do <a> węzła

Answer 2

First „na stronie HTML” jest trudne, ponieważ „strona” jest w rzeczywistości drzewo DOM (która jest częściowo składa się z węzłów tekstowych i przeważnie składa się z Elementy HTML).

Najprostszym sposobem rozwiązania tego problemu byłoby kierowanie na tekstowe węzły tekstowe. Dla każdego węzła tekstowego zastosuj coś takiego:

// 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: tu są implikacje związane z bezpieczeństwem. Jeśli generujesz linki z niezestrygowanego tekstu, istnieje możliwość XSS.