woocommerce - 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!

question from:https://stackoverflow.com/questions/65865939/strip-spaces-on-one-condition-add-them-on-another-jquery-not-working

Answer 1

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>