Using Javascript to replace a href with onlick

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?

I don't think honestly it's a duplicate of that. I would reopen the question, or at least elaborated better why it was closed. — ZER0, Jun 13 '18 at 12:54
Do you want `onClick="myFunction('id=123')"` or `onClick="myFunction(123)"` — mplungjan, Jun 13 '18 at 13:12

score 3 · Accepted Answer · edited Jun 13 '18 at 13:07

3

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>

edited Jun 13 '18 at 13:07

mplungjan

169,008
28
173
236

answered Jun 13 '18 at 12:55

Nikhil Aggarwal

28,197
4
43
59

1

Fixed. I must've copied something bad or accidentally added something. After copying again, all is fine. Thanks! – Fid Jun 13 '18 at 13:36
Here is an alternative to changing the links: https://stackoverflow.com/a/50850354/295783 – mplungjan Jun 14 '18 at 05:43

score 0 · Answer 2 · answered Jun 13 '18 at 12:55

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>

score 0 · Answer 3 · answered Jun 13 '18 at 13:05

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}`));
});

score 0 · Answer 4 · answered Jun 14 '18 at 05:42

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/>

Using Javascript to replace a href with onlick

4 Answers4