Suche nach allen Links und Erstellung einer Liste

Question

Wie kann man alle Links (keine Anker) finden und sie in der Reihenfolge, in der sie erscheinen, in jQuery in eine Liste einfügen.

Zum Beispiel:

Lorem ipsum Dolor sit amet, consectetur adipiscing elit. Donec sit amet ipsum ut justo fermentum hendrerit ultricies.

Daraus würde sich also etwas ergeben:

Lorem ipsum

• Dolor

sit amet,

• consectetur

adipiscing elit.

• Donec

sit amet ipsum ut justo fermentum hendrerit ultricies.

Grundsätzlich verwende ich embed.ly für meine Website, so dass, wenn ein Benutzer ein Formular ausfüllt, die youtube/flickr Links automatisch erscheinen, wo er sie erstellt. Das Problem, das ich habe, ist, dass die Miniaturansicht für das YouTube-Video zu groß zu sein scheint und nicht richtig umschaltet (d.h. ich möchte, dass der Benutzer auf die Miniaturansicht klickt, damit das Video angezeigt wird). (Wenn der Benutzer zum Beispiel auf den Dolar-Link klickt, sollte das YouTube-Video darunter erscheinen, wie es in den embed.ly-Beispielen der Fall ist).

Ich verwende php auf der Serverseite mit php markdown.

Der Abfragecode für embedly steht unten:

<script type="text/javascript">

$(document).ready(function() {
  $("a").embedly({}, function(oembed, dict){
    if ( oembed == null)
      alert("no embedly content found");    
    var output = "<a class='embedly' href='#'><img src='"+oembed.thumbnail_url+"' /></a><span>"+oembed.title+"</span>";
    output += oembed['code'];
    $(dict["node"]).parent().html( output );
  });
  var anchors = $("a");  anchors.embedly();  anchors.filter("[href*=flx.me]").addClass("googlenl");
  $('a.embedly').live("click", function(e){
    e.preventDefault();
    $(this).parents('li').find('.embed').toggle();
  });
});
</script>

Die HTML-Anweisung auf meiner Website lautet, wenn ein Video-Link hinzugefügt wird:

>    <div id="content">
>     <div class="youtube">
>             <p><a class="embedly" href="#"><img
> src="phpForum_files/hqdefault.jpg"></a><span>&#65333;&#65317;&#65318;&#65313;Chanpions
> League 2005-2006 RealMadrid vs Arsenal
> 2ndleg</span><div
> class="embed"><object height="360"
> width="640"><param name="wmode"
> value="opaque"><param name="movie"
> value="http://www.youtube.com/v/7aPGa9Gqj2c?fs=1"><param
> name="allowFullScreen"
> value="true"><param
> name="allowscriptaccess"
> value="always"><embed
> src="phpForum_files/7aPGa9Gqj2c.swf"
> type="application/x-shockwave-flash"
> allowscriptaccess="always"
> allowfullscreen="true" wmode="opaque"
> height="360"
> width="640"></object></div></p>
>     </div> </div>

Entschuldigung für die lange Frage. Zum Wohl.

Answer 1

$("#container").find("a").wrap("<li />").wrap("<ul />");

Demo: http://jsfiddle.net/karim79/RmCGh/

Answer 2

Sie könnten möglicherweise (lesen Sie "ungetestet") alle Nicht-Anker-Links finden, indem Sie etwas wie

$('a').not('[href^="#"]')

Von dort aus könnten Sie wickeln das Element in einer <ul><li>...</li></ul> Block.

Denken Sie daran, dass Sie, wenn Sie die Links an Ort und Stelle ersetzen wollen, den umgebenden Absatz abschließen müssen (wenn Sie einen Absatz verwenden), da Listen dort nicht hingehören.

Answer 3

var links = document.anchors;

oder

var links = element.getElementsByTagName('a');

Answer 4

 <p>
   Lorem ipsum <a href="http://www.link1.com" rel="nofollow">dolor</a> sit amet, <a href="http://www.link2.com" rel="nofollow">consectetur</a> adipiscing elit. <a href="http://www.link3.com" rel="nofollow">Donec</a> sit amet ipsum ut justo fermentum hendrerit ultricies.
  </p>
 <script type="text/javascript">
  $("p a").wrap("<ul><li></li></ul>");
 </script>