将锚文本作为href的一部分？

Question

我有一个看起来像这样的链接：

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

是否可以将此渲染为你好，世界？

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

我认为使用JavaScript可能是最好的方法？

任何帮助都会很好！

- Liu Kang

---

可以用脚本来实现，但是服务器肯定是“最佳方案”吧？ - RobG

由于这里的很多答案使用点击事件处理程序，我想指出链接上的单击事件并不是非常易用——例如，尝试在新选项卡中打开将会导致错误。如果必须在客户端执行此操作，最好在加载页面时循环遍历所有链接。 - Bob

RobG是正确的，为什么要动态拼接新的href？当您设置内部文本时，您有一个非常强烈的理由不附加到href吗？ - StuperUser

@liu-kang，下面的任何答案都解决了你的问题吗？ - 2540625

Answer 1

假设您的 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;
}

- Sudhir Bastakoti

---

最好使用textContent或innerText而不是innerHTML。 - RobG

如果您需要支持IE8（呃），则可以使用eles[i].textContent || eles[i].innerText || ''。请注意，翻译过程中不会添加解释或其他内容。 - Bob

Answer 2

你能试试这个吗，

<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，这个过程可能会变得更简单。

- Krish R

---

这真的有效。我可能会在单个页面上有许多类似这样的链接，这种内联JS会减慢网站的速度吗？ - Liu Kang

@Liu Kang 我已经更新了答案，并添加了可重用的函数。 - Krish R

Answer 3

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

- Hasibur

Answer 4

这可以帮助你。

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>

- Mritunjay

Answer 5

示例：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

- 2540625

---

document.links 是什么情况？ - RobG

Answer 6

也许可以这样写：

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

Fiddle

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

- joegandy

Answer 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;
}

工作的Fiddle

- V31

Answer 8

已经有很多答案了，再来一个也不会有什么影响。假设您没有服务器控制权，否则您只需修改 href 并完成它即可。一个简单的方法是：

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

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

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

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或其他属性进行测试。如果您想修改所有链接，请删除测试。

- RobG

Answer 9

试一下这个。

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

- sa77