使用jquery将链接替换为其href答案

【问题标题】：replace link with its href using jquery使用jquery将链接替换为其href
【发布时间】：2011-04-28 07:41:19
【问题描述】：

我有一个 p 标签，其中包含许多锚标签和一些文本。我想用其尊重的href替换每个锚标签。

【问题讨论】：

你能把你的问题充实一点吗？输入和预期输出的示例会很有帮助。
@Mat - 问题描述如下：输入<p><a href="blah">yada yada</a></p> ------ 输出<p>blah</p>。

标签： jquery

【解决方案1】：

我将您的问题解释为您要替换整个标签，而不仅仅是包含的文本，如下所示：http://jsfiddle.net/xXmWj/1/

你在找.replaceWith()：

$('p a').replaceWith(function() {
    return $(this).attr('href');
});

【讨论】：

@Felix，我正在输入这个答案！你是个速度恶魔。
绝对比我的回答干净。 +1
它只替换了几个锚点而留下了其他的。它显示一个错误：fragment.childNodes is undefined
@Yassir：您能否展示一下您的 HTML 的这一部分？会不会有些主播没有href属性？您可以尝试将选择器更改为$('p a[href]') 和/或将返回值更改为：document.createTextNode($(this).attr('href'));。不幸的是，我不知道这个错误在这种情况下意味着什么。

【解决方案2】：

试试这个：

$('p').find('a').each(function ()
{
    var $this = $(this);
    $this.html($this.attr('href'));
});

Demo

【讨论】：

与其使用 find，不如让 sizzle 做它最擅长的事情并使用 $('p a')
@Phil：因为它们在语义上是等价的，但 .find() 更快。
@Phil: $("p a") 几乎被翻译成$("p").find("a")。见stackoverflow.com/questions/3177763/…
这不会将a 标记替换为href 属性的内容。它只是将a 标记的innerHTML 设置为href....不是同一件事....a 标记不会像 OP 中要求的那样被替换。

【解决方案3】：

CSS3不使用jQuery的解决方案：

<style type="text/css">
    a > span { display: none; }
    a:after { content: attr(href); }
</style>
<a href="http://www.test.com"><span>Test</span></a>

为非 CSS3 浏览器优雅降级。

【讨论】：

在 IE9 之前似乎不支持 :after 伪选择器。 quirksmode.org/css/contents.html#t15

【解决方案4】：

很相似，我知道...

$("a").each(function(){
  $(this).text($(this).attr('href'));
});

【讨论】：