使用Javascript用onlick替换href

Question

I would like to change every anchor with class .example-class and change its href from

href="https://www.example.com/?fsaction=doSomething&id=123"

to

onClick="myFunction('id=123')"

Something along the lines of

$('.example-class').each(function() {
  var href = $(this).attr('href');
  var idOnly = (href -remove everything before and including id=);
  $(this).attr('onclick', "id='" + idOnly + "'")
  .removeAttr('href');
});

How can I "remove everything before and including id=" to get just 123 and will this work?

Answer 1

Use URL

 $('.example-class').each(function() { var href = $(this).attr('href'); var idOnly = (new URL(href)).searchParams.get("id"); $(this).attr('onclick', "myFunction('id=" + idOnly + "')") .removeAttr('href'); }); function myFunction(id) { console.log(id); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="example-class" href="https://www.example.com/?fsaction=doSomething&id=123">Here</a> 

Answer 2

You can use href.split('&')[1].split('=')[1] to get the id value only:

 $('.example-class').each(function() { var href = $(this).attr('href'); var idOnly = href.split('&')[1].split('=')[1]; $(this).attr('onclick', "myFunction('"+idOnly+"')") .removeAttr('href'); }); function myFunction(id){ console.log('id is ' + id); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class = 'example-class' href="https://www.example.com/?fsaction=doSomething&id=123">click me</a> 

Answer 3

In modern browsers I would probably wrote something among this line, in vanilla javascript:

document.querySelectorAll("a.example-class").forEach(a => {
  const params = new URLSearchParams(a.search);
  const id = params.get("id");
  a.removeAttribute("href");
  a.addEventListener("click", myFunction.bind(a, `id=${id}`));
});

Answer 4

Alternative to running over all links and change them:

 $('.example-class').on("click",function(e) { e.preventDefault(); // cancel the link var href = $(this).attr('href'); var idOnly = (new URL(href)).searchParams.get("id"); // from https://stackoverflow.com/a/50837858/295783 myFunction("id=" + idOnly); }); function myFunction(id) { console.log(id); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="example-class" href="https://www.example.com/?fsaction=doSomething&id=123">123</a><br/> <a class="example-class" href="https://www.example.com/?fsaction=doSomething&id=456">456</a><br/>