Hacer enlaces hacer clic en Javascript?

Question

¿Existe una manera sencilla de convertir una cadena a partir de

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

en

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

en Javascript en una página HTML existente?

Answer 1

Sí. La forma más simple es usar expresiones regulares para sustituir elementos que parecen un enlace por sus equivalentes vinculados. Algo así como:

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

(mi RegEx es un poco oxidado, por lo que puede que tenga que jugar con la sintaxis). Este es solo un caso simple. Debe tener cuidado con la inyección de scripts aquí (por ejemplo, si tengo http://"><script>doevil()</script>). Una forma de evitar esto es mediante el uso de una función de construcción de enlaces:

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

Dónde buildLink() puede comprobar para asegurarse de que la URL no contiene nada malicioso.

Sin embargo, el método RegEx-innerHTML no funcionará muy bien en grandes cantidades de texto, ya que destruye y reconstruye todo el contenido HTML del nodo. Esto se puede conseguir con métodos DOM así:

• Find referencia al nodo de texto
• En el contenido, encontrar comienzan y los índices final de la URL
• Uso splitText() método para dividir el nodo en 3: antes, enlace, después de
• Crear un nodo <a> con el href que es lo mismo que el enlace
• uso insertBefore() para insertar este nodo <a> antes del enlace
• Uso appendChild() para mover el enlace en el nodo <a>

Answer 2

En primer lugar, "dentro de una página HTML" es difícil debido a una "página" es en realidad un árbol DOM (que se compone en parte de los nodos de texto y en su mayoría compuesto por Elementos HTML).

La forma más fácil de abordar este problema sería apuntar a nodos de texto ricos en contenido. Para cada nodo de texto, aplique algo como esto:

// 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: hay implicaciones de seguridad aquí. Si genera enlaces de texto no esterilizado, existe la posibilidad de XSS.