Fare link cliccabili in Javascript?

Question

C'è un modo semplice di trasformare una stringa da

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

in

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

in Javascript all'interno di una pagina HTML esistente?

Answer 1

Sì. Il modo più semplice è quello di utilizzare una delle espressioni regolari per sostituire le cose che assomigliano a un link per i loro equivalenti collegate. Qualcosa di simile:

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

(la mia RegEx è un po 'arrugginito, quindi potrebbe essere necessario per giocare con la sintassi). Questo è solo un caso semplice. È necessario diffidare di inserimento di script qui (per esempio se ho http://"><script>doevil()</script>). Un modo per ovviare a questo è quello di utilizzare una funzione di link building:

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

Dove buildLink() può verificare che l'URL non contiene nulla dannoso.

Tuttavia, il metodo RegEx-innerHTML non eseguirà molto bene su grandi corpi di testo, però, dal momento che abbatte e ricostruisce l'intero contenuto HTML del nodo. È possibile raggiungere questo obiettivo con i metodi DOM così:

• Trova riferimento al nodo di testo
• Nel contenuto, trovare inizio e indici fine di un URL
• metodo Usa splitText() per dividere il nodo in 3: prima, di collegamento, dopo il
• Crea un nodo di <a> con l'href che è lo stesso del legame
• Usa insertBefore() per inserire questo nodo <a> prima che il collegamento
• Usa appendChild() per spostare il link nel nodo <a>

Answer 2

In primo luogo, "all'interno di una pagina HTML" è difficile perché una "pagina" è in realtà un albero DOM (che è parzialmente composta da nodi di testo e per lo più composto da elementi HTML).

Il modo più semplice per affrontare questo problema sarebbe quello di indirizzare ricche di contenuti nodi di testo. Per ogni nodo di testo, applicare qualcosa di simile:

// 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');

A proposito: ci sono implicazioni di sicurezza qui. Se si genera collegamenti da testo non sterilizzato, c'è la possibilità di XSS.