使锚文本成为href的一部分

Make anchortext part of href?

本文关键字：href 一部分 文本      更新时间：2023-09-26

我有一个链接，看起来像这样:

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

是否可以将此渲染为Hello World?

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

我认为javascript可能是这样做的最好的方式?

任何帮助都会很好!

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

你可以试试这个吗，

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

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

这可以帮助你

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>

你可以利用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;
}
工作小提琴

可能是这样的:

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

小提琴

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

答案很多，所以再多一个也无妨。假设您无法控制服务器，否则您只需修改那里的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或其他属性。如果您想修改所有链接，只需删除test.

试试这个

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

DEMO: 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

相关文章：