javascript - anchor 标签显示全链接问题

Question

我发现了一些非常棒的链接检测正则表达式，效果非常好。它只接受链接的主要部分并将其显示为 anchor 标记的主体，将整个链接显示为 href。例如，http://somesite.com/index.php?some=var 看起来就像 somesite.com。这纯粹是令人敬畏的，但它也有它的缺点，因为有人可能会传递一些你可能出于某种原因不一定想要发送的变量，我想我需要在 anchor 主体中显示整个 url。可悲的是，我不想放弃漂亮的主播，我决定我应该在某些事件上显示完整链接，因此麻烦来了。

首先我认为我应该使用鼠标悬停(jquery 的 mouseenter)来显示完整链接，然后使用 mouseleave 使其再次美观。不幸的是，由于带有一堆参数的行末尾的站点名称很短，因此没有成功。示例:如果在一行的末尾有一个 body site.com 和 href http://site.com/some/params 的 anchor ，展开后它将转到下一行，这将触发鼠标离开并压缩它，这将自行将链接返回到原始行并触发扩展函数，从而创建一个无限循环。

第二个想法是右键单击展开链接。显然，必须禁用要扩展的链接上的上下文菜单。不幸的是，在一行的末尾有相同的链接会导致显示上下文菜单，因为展开后右键单击也会在短链接曾经所在的空白处触发。

我的想法好像用完了，有谁有吗？

Answer 1

在不破坏布局的情况下，您可以使用 native title属性来显示完整的 URL，或者，对于更可定制的东西，一个插件，比如 jQuery UI 的 tooltip widget .

<a href="http://www.shorturl.com/?param=notSoShortUrl"
  title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>

如果在初始标记中输出了 title 属性，即使禁用 JS，此解决方案也能正常工作。如果您愿意，jQuery UI 工具提示可能有助于为启用 JS 的用户自定义它。

---

如果有人对如何解决 OP 中描述的断行问题感兴趣，这是我实现非断行可扩展链接的原始解决方案:

<a href="http://www.aaaaaaaaaaaaaaaaaa.com/?params=somelongstring">aaaaaaaaaaaaaaaaaa.com</a>

$('a').hover(function(e) {
    $(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
    $(this).css({
        width: this.offsetWidth,
        whiteSpace: 'nowrap',
        display: 'inline-block'
    }).data('shorturl', $(this).text());
});

Demo

不过，这主要是一个 CSS hack，链接文本可能会泄漏到容器外(显然，如果容器有 overflow:hidden 就不会工作)，所以它不是很好出于布局目的。最好坚持使用 title 或工具提示插件。