How to get the number at the end of the url of an anchor using jquery?

Question

My anchor tags inside a table row and are of the following form where the numbers at the end of the url can be any numer 1,9,100, 1049,... etc.

How can I get the number at the end of the url when an anchor is clicked? I can't even get the following to work.:

$('table').on('click', 'a', function (event) {
  alert($(this).attr('href').val());
});

$('table').on('click', 'a', function (event) {
  alert($(this).attr('href').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/1">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/2">Order Detail</a>
    </td>
  </tr>
  ...
  ...
  <tr>
    <td>
      <a href="/ControllerName/ActionName/100">Order Detail</a>
    </td>
  </tr>
  ...
  ...
  <tr>
    <td>
      <a href="/ControllerName/ActionName/149">Order Detail</a>
    </td>
  </tr>
  ...
  ...
</table>

Answer 1

To extract the digits at the end of the string, you can use RegEx \d+$. \d+ will match one or more digits and $-ends with anchor will make the match at the end of line. So, this will match the number at the end of string.

$(this).attr('href').match(/\d+$/)[0]

match() will match the number and return an array. To get the number from zeroth index of array [0] is used. As suggested in other answers this.href can also be used to get the value of href attribute of the clicked element. Note that this inside event handler refer to the element on which event has occurred.

---

There are some issues in the code

$(table).on('click', a , function (event) {
   alert($(this).attr('href').val());
});

As I don't see table and a variables defined in the code given, I'm assuming that you're trying to use them as selectors.$(table) should be $('table') and a should be $('a').

$(this).attr('href') will return the value of href attribute. So, there is no need to call val() on it. val() is used to get the element value(i.e. the value of value attribute on element).

The anchor click will redirect to the given URL. To stop this, you can use event.preventDefault() or add return false at the end of the event handler.

$('table').on('click', 'a', function(e) {
  console.log(this.href.match(/\d+$/)[0]);
  
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/1">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/2">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/100">Order Detail</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/ControllerName/ActionName/149">Order Detail</a>
    </td>
  </tr>
</table>