Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...