2010-04-14 16 views
5

cómo encuentro las URL (es decir, www.dominio.com) dentro de un documento, y las coloca dentro de las anclas: < a href = "www.dominio.com"> www.dominio.com </a>Javascript: encuentre las URL en un documento

html:

Hey dude, check out this link www.google.com and www.yahoo.com! 

javascript:

(function(){var text = document.body.innerHTML;/*do replace regex => text*/})(); 

de salida:

Hey dude, check out this link <a href="www.google.com">www.google.com</a> and <a href="www.yahoo.com">www.yahoo.com</a>! 

Respuesta

6

En primer lugar, www.domain.com no es una dirección URL, que es un nombre de host y

<a href="www.domain.com"> 

no funcionará - buscará un archivo .com llamado www.domain relativo a la página actual.

No es posible resaltar nombres de host en el caso general porque casi cualquier cosa puede ser un nombre de host. Usted podría tratar de resaltar 'www.something.dot.separated.words', pero no es tan confiable y hay muchos sitios que no usan el prefijo de nombre de host www.. Trataría de evitar eso.

/\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/; 

Este es un patrón muy liberal que podría utilizarse como punto de partida para detectar URL HTTP. Dependiendo del tipo de entrada que tenga, puede restringir lo que permite, y puede valer la pena detectar caracteres finales como . o ! que serían partes válidas de la URL, pero en la práctica generalmente no lo son.

(Se puede usar un | para permitir que sea la URL sintaxis o la sintaxis www.hostname, si lo desea.)

De todos modos, una vez que se decida por su patrón preferido usted necesitará encuentra ese patrón en los nodos de texto en la página. No ejecute la expresión regular sobre el marcado innerHTML. Terminará arruinando completamente la página tratando de marcar cada href="http://something" que ya esté dentro del marcado. También destruirá cualquier referencia de JavaScript existente, eventos o valores de campo de formulario cuando reemplace el contenido de innerHTML.

En general, regexp simplemente no puede procesar HTML de manera confiable. Así que aprovecha el hecho de que el navegador ya ha analizado el HTML en elementos y nodos de texto, y solo mira los nodos de texto. También querrás evitar mirar dentro de los elementos <a>, ya que marcar una URL como un enlace cuando ya está en un enlace es tonto (y no es válido).

// Mark up `http://...` text in an element and its descendants as links. 
// 
function addLinks(element) { 
    var urlpattern= /\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/g; 
    findTextExceptInLinks(element, urlpattern, function(node, match) { 
     node.splitText(match.index+match[0].length); 
     var a= document.createElement('a'); 
     a.href= match[0]; 
     a.appendChild(node.splitText(match.index)); 
     node.parentNode.insertBefore(a, node.nextSibling); 
    }); 
} 

// Find text in descendents of an element, in reverse document order 
// pattern must be a regexp with global flag 
// 
function findTextExceptInLinks(element, pattern, callback) { 
    for (var childi= element.childNodes.length; childi-->0;) { 
     var child= element.childNodes[childi]; 
     if (child.nodeType===Node.ELEMENT_NODE) { 
      if (child.tagName.toLowerCase()!=='a') 
       findTextExceptInLinks(child, pattern, callback); 
     } else if (child.nodeType===Node.TEXT_NODE) { 
      var matches= []; 
      var match; 
      while (match= pattern.exec(child.data)) 
       matches.push(match); 
      for (var i= matches.length; i-->0;) 
       callback.call(window, child, matches[i]); 
     } 
    } 
} 
Cuestiones relacionadas