2010-04-14 4 views
5

Wie finde ich URLs (zB www.domain.com) in einem Dokument und setze diese innerhalb von Ankern: < a href = "www.domain.com"> www.domain.com </a>Javascript: URLs in einem Dokument finden

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

Ausgabe:

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

Antwort

6

Erstens www.domain.com ist kein URL, es ist ein Hostname und

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

wird nicht funktionieren - es wird nach einer .com Datei mit der Bezeichnung www.domain relativ zur aktuellen Seite suchen.

Es ist nicht möglich, Hostnamen im allgemeinen Fall hervorzuheben, da fast alles ein Hostname sein kann. Sie könnte versuchen, "www.something.dot.separated.words" zu markieren, aber es ist nicht wirklich so zuverlässig und es gibt viele Websites, die das www. Hostname-Präfix nicht verwenden. Ich würde versuchen, das zu vermeiden.

Dies ist ein sehr liberales Muster, das Sie als Ausgangspunkt für die Erkennung von HTTP-URLs verwenden könnten. Abhängig davon, welche Art von Eingabe Sie haben, können Sie eingrenzen, was es erlaubt, und es kann sich lohnen, nachlaufende Zeichen wie . oder zu erkennen, die gültige Teile der URL sind, aber in der Praxis im Allgemeinen nicht.

(könnte Sie verwenden ein |entweder die URL-Syntax oder die www.hostname Syntax zu ermöglichen, wenn Sie möchten.)

Wie auch immer, wenn Sie auf Ihre bevorzugten Muster entschieden haben müssen Sie auf finde dieses Muster in Textknoten auf der Seite. Führen Sie den Regexp nicht über innerHTML Markup aus. Sie werden die Seite komplett ruinieren, indem Sie versuchen, alle href="http://something", die bereits in Markup sind, zu markieren. Wenn Sie den Inhalt innerHTML ersetzen, werden auch alle vorhandenen JavaScript-Referenzen, Ereignisse oder Formularfeldwerte zerstört.

Im Allgemeinen kann regexp HTML auf keine zuverlässige Weise verarbeiten. Nutzen Sie also die Tatsache, dass der Browser den HTML-Code bereits in Elemente und Textknoten zerlegt hat und schauen Sie sich einfach die Textknoten an. Sie sollten auch vermeiden, in die Elemente <a> hineinzuschauen, da das Markieren einer URL als Link, wenn sie bereits in einem Link ist, albern (und ungültig) ist.

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