How to change html href attribute variable value with jQuery?

Question

I am trying to change html href attribute variable value ?post=55 to ?post=44 with button click while not changing other URL variable(thread=7) using jQuery, but don't know how.

HTML

<button class="button">button</button>

<a href="posts.php?thread=7&post=55" class="post-link">Post</a>

JAVASCRIPT

$('.button').on('click', function() {

$("a").attr('href','posts.php?post=44') // this does not work because it removes ?thread=7
$("a").attr('href','posts.php?thread=7&post=44') // this also does not work because ?thread=7 is just a placeholder. I don't know what actual thread number is going to be.
  
});

This is what I have

<a href="posts.php?thread=7&post=55" class="post-link">Post</a>

This is what I want when clicking button

<a href="posts.php?thread=7&post=44" class="post-link">Post</a>

I think the only way would be to read the href value and construct a new one based on the existing params — Oskar Zanota, Jul 10 '22 at 19:36

score 1 · Answer 1 · answered Jul 10 '22 at 19:54

$('.button').on('click', function() {
   // Get the href Value:
   const link = $("a").attr('href'); // posts.php?thread=7&post=44
   // Split the href value by '&' (returns Array):
   const parts = link.split('&'); // ['posts.php?thread=7','post=44']
   // Get the actual post value (may not needed?)
   const post = parts.slice(-1)[0]; // post=44
   // remove the 'post=44' part:
   parts.pop() // ['posts.php?thread=7']
   // Important if more than one "&" in URL:
   const linkBase = parts.join('&');
   // Build the new URL including YOUR Post number:
   const newUrl = linkBase + '&post=n';
   
   $("a").attr('href', newUrl)

// Sources:
// https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/split
  
});

Please note that this is an example that can be improved but its written with all necessary steps to better followup.

Hope it helps

score 1 · Accepted Answer · answered Jul 10 '22 at 20:06

To do what you require you can provide a function to prop() (note: not attr()*) which accepts the current attribute value as an argument. From there you can use a regular expression to find the number within the current href and replace it.

The benefit of using this method is that it will work no matter where in the URL the post argument appears.

Also in the following example I stored the page value to set as a data attribute on the button, but this can be amended to suit your specific use case.

$('.button').on('click', function() {
  $('a').prop('href', (i, href) => href.replace(/(post=)\d{1,2}/, '$1' + $(this).data('page')));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="button" data-page="44">Update post to '44'</button>

<a href="posts.php?thread=7&post=55" class="post-link">Post</a>

* See this answer for why you should use prop() over attr().

How to change html href attribute variable value with jQuery?

2 Answers2