CODEWITHSUNDEEP
javascriptjquery
Morgari
Morgari

Reputation: 555

Remove site name from the button href until the " ? " symbol

I have the following button on my website:

   <a role="button" id="purchase" href="https://www.website.com/my-product/?add-to-cart=111&variation_id=115855/">

This button belongs to selector so when user choose another product option the variation changes dynamically.

As an example, user can choose the variation A, B, C

And the button changes into something like that:

For A - https://www.website.com/my-product/?add-to-cart=111&variation_id=115856/

For B - https://www.website.com/my-product/?add-to-cart=111&variation_id=115857/

For C - https://www.website.com/my-product/?add-to-cart=111&variation_id=115858/

All I want is to exclude everything until the " ? " symbol in the button link and it should looks like that when I hover on it:

<a role="button" id="purchase" href="?add-to-cart=111&variation_id=115855/">

I tried something like that:

function removeSlug() {

  var slugtest = document.getElementById("purchase").value;
  text.split('?')[0];
}

but nothing helped. Unfortunately my js knowledge is too bad to get where the issue is.

Thank you in advance.

Upvotes: 0

Views: 49

Answers (3)

Th&#226;n LƯƠNG Đ&#236;nh
Th&#226;n LƯƠNG Đ&#236;nh

Reputation: 3220

I suggest a solution using regex.

function modifyLinkHref() {
  var href = document.getElementById("purchase").getAttribute('href');
  var newHref = href.replace(/(.*)(\?.*)/g, "$2");
  document.getElementById("purchase").setAttribute('href', newHref);
  console.log(document.getElementById("purchase").getAttribute("href"));
}

modifyLinkHref();

Regex:

(.*)(\?.*)

Details:

  • .*: Group 1 - take any character until before character ?
  • \?.*: Group 2 - after character ?, take any character

Explanation

Demo

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You can use .setAttribute() and .getAttribute() plus array .pop():

var slugtest = '?' + document.getElementById("purchase").getAttribute('href')
                                                           .split('?').pop();
document.getElementById("purchase").setAttribute('href', slugtest);

console.log(document.getElementById("purchase"));
<a role="button" id="purchase" href="https://www.website.com/my-product/?add-to-cart=111&variation_id=115855/">

Another way to change an url can be based on URL interface:

// get the href value
var hreftext = document.getElementById("purchase").getAttribute('href');

// convert href to an URL and get the search property
var slugtest = new URL(hreftext).search;
document.getElementById("purchase").setAttribute('href', slugtest);

console.log(document.getElementById("purchase"));
<a role="button" id="purchase" href="https://www.website.com/my-product/?add-to-cart=111&variation_id=115855/">

Upvotes: 1

keidakida
keidakida

Reputation: 741

You should not use document.getElementById("purchase").value since it is not an input field but an element, you have to use .getAttribute("href") like this

var slugtest = document.getElementById("purchase").getAttribute("href");
console.log(slugtest.split("?")[1]);

You can run it in the snippet below:

<a role="button" id="purchase" href="https://www.website.com/my-product/?add-to-cart=111&variation_id=115855/">

<script>
    var slugtest = document.getElementById("purchase").getAttribute("href");
    console.log(slugtest.split("?")[1]);
</script>

Upvotes: 0

Related Questions