Encontrar todos los enlaces y hacer una lista

Question

¿cómo puede encontrar todos los enlaces (no hay anclas) y colocarlos dentro de una lista, en el orden en que aparecen, en jQuery.

Por ejemplo:

sit amet, consectetur adipiscing elit . Donec sit amet ipsum ut Justo fermentum hendrerit ultricies.

Por lo tanto, esto se convertiría en:

Lorem ipsum

• dolor

sit amet,

• consectetur

elit adipiscing.

• Donec

ut sit amet ipsum Justo fermentum ultricies hendrerit.

Básicamente estoy usando embed.ly para mi sitio, por lo que cuando un usuario rellena un formulario, los enlaces de YouTube / Flickr aparecen automáticamente en el que los creó. El problema que estoy teniendo es que la miniatura del video de Youtube parece ser demasiado grande, y no alternar correctamente (es decir, quiero que el usuario haga clic en la miniatura para el vídeo a aparecer). (Así, por ejemplo, si el usuario hace clic en el enlace dolar, el vídeo de YouTube debe aparecer debajo de él, como lo hace en las muestras embed.ly).

Estoy usando PHP en el lado del servidor con php de reducción del precio.

El código de consulta para Embedly es el siguiente:

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

El HTML mi sitio hace que cuando un añade un enlace de vídeo es:

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

Lo siento por la pregunta alargada. Saludos.

Answer 1

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

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

Answer 2

You could possibly (read "untested") find all non-anchor links using something like

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

From there, you could wrap the element in a <ul><li>...</li></ul> block.

Keep in mind that if you're wanting to replace the links in-place, you may need to close off the surrounding paragraph (if using a paragraph) as lists do not belong there.

Answer 3

var links = document.anchors;

or

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>