使锚文本成为href的一部分？答案

【问题标题】：Make anchortext part of href?使锚文本成为href的一部分？
【发布时间】：2014-09-15 13:59:59
【问题描述】：

我有一个如下所示的链接：

<a class="link" href="https://www.google.com/?q=">Hello world</a>

是否可以将其渲染为Hello World？

链接应指向https://www.google.com/?q=Hello world，而不在href 中指定。

我认为 javascript 可能是最好的方法？

任何帮助都会很好！

【问题讨论】：

可以用脚本来完成，但服务器肯定是“这样做的最佳方式”吗？
由于这里的许多答案都使用点击事件处理程序，我想指出链接上的点击事件不是很容易访问 - 例如，尝试在新选项卡中打开它会中断。如果必须在客户端完成，最好在加载时遍历页面上的所有链接。
RobG 是正确的，为什么要即时连接一个新的 href？当您设置内部文本时，您是否有一个非常令人信服的理由不附加到 href？
@liu-kang，下面的答案是否解决了您的问题？

标签： javascript html http anchor href

【解决方案1】：

演示：http://jsbin.com/rudobe/edit?html,js,output

HTML：

<a class="link" href="https://www.google.com/?q=">Hello world</a>

JS：

var anchor = document.getElementsByClassName('link')[0];
var href = anchor.getAttribute('href');
var text = anchor.textContent;
anchor.setAttribute('href', href + text); // The `+` operator concatenates here.

文档：

http://devdocs.io/dom/element.setattribute

http://devdocs.io/dom/element.getattribute

http://devdocs.io/dom/node.textcontent

http://devdocs.io/dom/document.getelementsbyclassname

【讨论】：

document.links 呢？

【解决方案2】：

可能是这样的：

$('.link').click(function(){
    $(this).attr('href', this.href + encodeURIComponent($(this).text()));
});

Fiddle

这将在提交链接之前更改 href 属性

【讨论】：

【解决方案3】：

你可以试试这个，

<a class="link" href="https://www.google.com/?q=" onclick='window.location.href = this.href+encodeURI(this.textContent); return false; '>Hello world</a>

添加onclick 事件处理程序并获取标签的href 和textContent 并将它们组合在一起。然后它会给出预期的结果。

更新：如果您的页面中有很多链接，那么您可以创建 javascript 函数并在需要时调用它。

Javascript：

 function Search(d){
     window.location.href = d.href+encodeURI(d.textContent); 
    return false; 
 }

HTML：

 <a class="link" href="https://www.google.com/?q=" onclick='Search(this);'>Hello world</a>

即使你觉得要集成 jquery，过程也可能会变得更简单。

【讨论】：

这确实有效。我可能会在一个页面上有很多这样的链接，这种类型的内联JS会减慢网站的速度吗？
@Liu Kang 我已经更新了具有重复使用功能的答案。

【解决方案4】：

text = $(".link").html();
link = $(".link").attr('href');
$(".link").attr('href',link+text);

【讨论】：

【解决方案5】：

假设您的href 始终采用https://www.google.com/?q= 格式，您可以这样做：

var eles = document.getElementsByTagName('a');
for(var i = 0, len = eles.length; i < len; i++) {
    //get the inner html of anchor tag
    //var text = eles[i].innerHTML;
    //better use textContent
    var text = eles[i].textContent;
    //append anchor tag inner html to href
    eles[i].href += text;
}

【讨论】：

使用 textContent 或 innerText 可能比使用 innerHTML 更好。
如果你想/需要支持 IE8（呃），eles[i].textContent || eles[i].innerText || ''

【解决方案6】：

这对你有帮助

Javascript

function changeHref () {
        var anchor = document.getElementsByTagName('a')[0];
        anchor.href += anchor.textContent;
}

HTML

<a class="link" onclick="changeHref()" href="https://www.google.com/?q=">Hello world</a>

【讨论】：

【解决方案7】：

可以利用javascript的onclick事件：

<a class="link" href="#" onclick="navigateToLink(this)">Hello world</a>

在javascript中你可以这样处理：

function navigateToLink(elt){
   console.log("https://www.google.com/?q="+elt.textContent );
   window.location.href="https://www.google.com/?q="+ elt.textContent;
}

Working Fiddle

【讨论】：

【解决方案8】：

很多答案，所以再多一个不会有什么坏处。大概您无法控制服务器，否则您只需修改 href 并完成它。一个简单的方法是：

<a href="..." onclick="this.href+=this.textContent||this.innerText">...</a>

使用 textContent 或 innerText 意味着您可以在链接的内容中添加标记，并且它不会成为 href 的一部分。

仅修改 href 中带有“google.com”的链接的更通用解决方案是：

function modifyLinks() {
  var link, links = document.links;
  var re = /google\.com/i;

  for (var i=0, iLen=links.length; i<iLen; i++) {
    link = links[i];

    if (re.test(link.href)) {
      link.href += link.textContent || link.innerText;
    }
  }
}

window.onload = modifyLinks;

测试可以更改为任何内容，也许您希望将其基于 className 或其他一些属性。如果要修改所有链接，只需删除测试即可。

【讨论】：

【解决方案9】：

试试这个。

$(document).ready(function(){
    $('.link').on('click', function(){
        var temp = $(this).attr('href');
        var html = $(this).html();
        $(this).attr('href',temp+html);
    });
});

【讨论】：