2010-04-14 19 views
5

jak znaleźć adresy URL (np. Www.domena.com) w dokumencie i umieść je wewnątrz kotwicy: < a href = "www.domena.com"> www.domena.com </a>JavaScript: znajdź adresy URL w dokumencie

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*/})(); 

wyjściowa:

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>! 

Odpowiedz

6

Po pierwsze, www.domain.com nie jest adresem URL, to nazwa hosta, a

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

nie będzie działać - będzie szukał pliku o nazwie .com o nazwie www.domain w odniesieniu do bieżącej strony.

Podsumowywanie nazw hostów w ogóle nie jest możliwe, ponieważ prawie wszystko może być nazwą hosta. Możesz może spróbować podświetlić "www.something.dot.separated.words", ale nie jest tak naprawdę niezawodny i istnieje wiele witryn, które nie używają prefiksu nazwy hosta www.. Próbowałbym tego uniknąć.

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

Jest to bardzo liberalny wzorzec, który można wykorzystać jako punkt wyjścia do wykrywania adresów URL HTTP. W zależności od tego, jakie masz dane wejściowe, możesz zawęzić to, na co pozwala, i może być warte wykrycia znaków końcowych, takich jak . lub !, które byłyby prawidłowymi częściami adresu URL, ale w praktyce na ogół nie są.

(można użyć | aby umożliwić albo URL składnia lub składnia www.hostname, jeśli chcesz).

Tak czy inaczej, kiedy już osiadł na preferowanego wzoru będziesz musiał znajdź ten wzór w węzłach tekstowych na stronie. Nie uruchamiaj wyrażeń regularnych nad znacznikami innerHTML. Kończysz całkowicie rujnowanie strony, próbując oznaczyć każdy znak href="http://something", który jest już wewnątrz znaczników. Zniszczycie również wszelkie istniejące referencje JavaScript, zdarzenia lub wartości pól formularza po zamianie zawartości innerHTML.

Zwykle wyrażenie regularne po prostu nie może przetworzyć HTML w żaden niezawodny sposób. Wykorzystaj więc fakt, że przeglądarka przetworzyła już HTML na elementy i węzły tekstowe, i po prostu spójrz na węzły tekstowe. Nie powinieneś również zaglądać do elementów <a>, ponieważ oznaczenie adresu URL jako łącza, gdy jest już w łączu, jest głupie (i nieprawidłowe).

// 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]); 
     } 
    } 
}