查找所有链接并制作列表

Question

如何在jQuery中找到所有链接（没有锚点），并按它们出现的顺序将它们放入列表中？

例如： Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ipsum ut justo fermentum hendrerit ultricies。

结果应该是这样的： Lorem ipsum

• dolor

sit amet,

• consectetur

adipiscing elit.

• Donec

sit amet ipsum ut justo fermentum hendrerit ultricies.

我正在为我的网站使用embed.ly，因此当用户填写表单时，YouTube / Flickr链接会自动出现在他创建的位置。我遇到的问题是YouTube视频的缩略图似乎太大，并且无法正确切换（即，我希望用户单击视频缩略图才会显示视频）。 （因此，例如，如果用户单击dolar链接，则应像在embed.ly示例中那样，在其下方显示YouTube视频）。

我在服务器端使用PHP和PHP Markdown。

以下是embedly的查询代码：

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

我的网站在添加视频链接时生成的HTML代码如下：

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

非常抱歉问题比较冗长。谢谢。

- jonnnnnnnnnie

---

如果它们不是锚点，那么链接是什么？ - David Thomas

@David 我认为 OP 只想捕获 URI 链接，而不是 "书签"（哈希链接）。 - Phil

是的，抱歉，应该说只有URI... - jonnnnnnnnnie

Answer 1

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

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

- karim79

---

这仍然会捕获哈希链接。考虑使用 not() 过滤链接集合。此外，要小心生成的标记。列表不应该出现在段落中。 - Phil

Answer 2

你可以尝试使用类似以下代码来查找所有非锚点链接（未经测试）：

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

从那里开始，您可以将元素包装在<ul><li>...</li></ul>块中。

请记住，如果您想要直接替换链接，则可能需要关闭周围的段落（如果使用段落），因为列表不属于其中。

- Phil

Answer 3

var links = document.anchors;

或者

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

- OrangeDog

---

不确定你所说的“链接（没有锚点）”是什么意思。 - OrangeDog

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>

- Chandu