Strip spaces on one condition, add them on another - jQuery not working

Question

On the basket page of my client's WooCommerce site is a series of HTML strings that are generated from meta data that I cannot edit and therefore wish to manipulate with jQuery.

Essentially, I want to make text prettier for better usability.

Current output: BBQ Pack – Disposable×2 ( £10.00 - One Time ) ,

Desired output: BBQ Pack – Disposable × 2 (£10.00 - One Time)

Mark-up:

<dd class="variation-Extras">
    <p>BBQ Pack – Disposable×2 ( 
        <span class="woocommerce-Price-amount amount">
            <span class="woocommerce-Price-currencySymbol">£</span>10.00
        </span> - One Time ) , 
        <br> Bike Pack – Electric×1 ( 
            <span class="woocommerce-Price-amount amount">
                <span class="woocommerce-Price-currencySymbol">£</span>15.00
            </span> - Per Day ) ,  
    </p>
</dd>

The below jQuery throws an error of .trim is not a function:

<script>
jQuery(document).ready(function(UpdateCartItemText) {
            jQuery(".variation-Extras p").trim();
});
</script>

Any advide on why this isn't working and how to achieve the desired outcome of spaces either side of 'x' removing spaces before and after '(' and ')' and removing the end ',' would be great!

See documentation for [jQuery `trim()`](https://api.jquery.com/jquery.trim/), It works only for a **string** this way `jQuery.trim( string );` but not for html. — LoicTheAztec, Jan 24 '21 at 01:06
Thanks for the reply @LoicTheAztec. Am I able to innerHTML or similar to manipulate the HTML? If not, could you recommend a better means? — Steven Leek, Jan 24 '21 at 03:43
Maybe https://stackoverflow.com/q/1539367/3730754 or https://stackoverflow.com/q/12014441/3730754 or https://stackoverflow.com/a/360496/3730754 — LoicTheAztec, Jan 24 '21 at 06:42

score 0 · Answer 1 · answered Jan 29 '21 at 18:02

That formatting should be done from WooCommerce.

But if you insist on doing it with jQuery, like in your previous question... It would be something like this:

jQuery(document).ready(function() {

  // Get the HTML
  let html = jQuery(".variation-Extras p").html();

  // This targets a spaces followed by a coma
  html = html.replace(/\s\,/gm, ",");

  // This targets an open parenthesis followed by an unknown amount of spaces
  html = html.replace(/\((\s){1,}/gm, "(");

  // This targets a closing angle bracket followed by an unknown amount of spaces
  html = html.replace(/>(\s){1,}</gm, "");

  // This targets a spaces followed by a closing parenthesis
  html = html.replace(/\s\)/gm, ")");

  // This targets the "x" followed by a digit
  html = html.replace(/×(\d)/gm, " x $1");

  jQuery(".variation-Extras p").html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <dd class="variation-Extras">
    <p>BBQ Pack – Disposable×2 (
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">£</span>10.00
      </span> - One Time ) ,
      <br> Bike Pack – Electric×1 (
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">£</span>15.00
      </span> - Per Day ) ,
    </p>
  </dd>
</ul>

So as you can see... Just for what looked like a very simple replacement, it already needs 5 regular expressions to do the replacements.

I highly recommand you to look how to edit the templates instead of doing the improvements with jQuery.

Hey Louys, thanks for taking a look at this. Unfortunately, the necessary code is being output from a third party plugin and I cannot override the core files with child-theme templates. At the moment, the only solution I have is to use jQuery. And, your solution works - but only on the basket page - not the checkout page or the mini cart. Even though the mark-up is the same for targeting the element in those 3 places. Any idea why it would work in one instance but not the others? — Steven Leek, Jan 30 '21 at 14:21

Strip spaces on one condition, add them on another - jQuery not working

1 Answers1

Linked