Question

有没有办法在该链接后自动插入链接的域名？我想看到这个：

A link to youtube video [youtube.com]

我更喜欢只使用HTML和CSS，但我想这是不可能的。这个想法是使用这个代码：

  a:after {
    content: " [" attr(href) "]";
  }

但那当然会显示整个网址：

A link to youtube video [https://www.youtube.com/watch?v=asdfghi00]

我认为这太长而且没必要了。我使用Wordpress（可能只有一个插件来做这个，我只是没有看到它）。它链接jQuery，因此jquery脚本可能是可以接受的。或者，我可以使用PHP并将其破解成Wordpress。

您认为哪种解决方案最好？ PHP还是Javascript？我是否会从使用jQuery中受益（好吧，无论如何都加载了它）？如果可能的话，你能为我写这个片段吗？感谢。

Answer 1

如果你能负担得起链接上的其他属性，你可以这样做。

Here's an example

在您的标记中，添加data-属性：

<a href="youtube.com/foo" data-href-domain="youtube.com">a link to youtube video</a>

并在尝试时使用生成的内容引用它：

a:after {
 content: " [" attr(data-href-domain) "]";
}

Answer 2

当我想到它时，可能的解决方案之一是创建自定义短代码（在插件Shortcoder或类似的帮助下）。这将允许我使用显示的地址制作经典链接和链接非常舒适。我会使用类似于此的短编码器语法：

<a href="http%%s%%://%%domain%%/%%link%%">%%text%%</a> [%%domain%%]

使用它 - Lorem Ipsum [sc:extlink s="s" domain="youtube.com" link="watch?v=asd" text="link" ] Dolor Dot.转换为：

<p>Lorem Ipsum <!-- Start Shortcoder content --><a href="https://youtube.com/watch?v=asd">link</a> [youtube.com]<!-- End Shortcoder content --> Dolor Dot.</p>

或

<a class="with-note" href="http%%s%%://%%domain%%/%%link-tail%%" data-href-domain="%%domain%%">%%text%%</a>

后者使用CSS以Alessandro suggested的方式。但它仍然不是那么美好和舒适，因为它应该是。如果没有人可以提供更好的东西，那么这只是一个选择。

Answer 3

这个问题很老，但是你可以用jQuery来实现它：

$('a').each(function () {
    this.hostname && $(this).after(' ['+this.hostname+']');
});

编辑：您可以在stackoverflow上尝试将其粘贴到控制台

如何在超链接后以纯文本格式插入链接的域名？

3 个答案: