在一种情况下去除空格，将它们添加到另一种情况 - jQuery 不起作用 [英] Strip spaces on one condition, add them on another - jQuery not working

问题描述

在我客户的 WooCommerce 站点的购物篮页面上，有一系列 HTML 字符串，这些字符串是从元数据生成的，我无法编辑这些元数据，因此希望使用 jQuery 进行操作.

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.

当前输出:BBQ Pack – 一次性×2(£10.00 - 一次)，

所需的输出:BBQ Pack – 一次性 × 2(10.00 英镑 - 一次)

标记:

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

下面的 jQuery 抛出 .trim is not a function 的错误:

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

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

任何关于为什么这不起作用的建议以及如何在 'x' 两边的空格中删除 '(' 和 ')' 前后的空格并删除结尾 ',' 的任何建议都会很棒！

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!

推荐答案

该格式化应该从 WooCommerce 中完成.

That formatting should be done from WooCommerce.

但如果你坚持用 jQuery 来做这件事，就像在 你之前的问题... 应该是这样的:

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>

如您所见...只是为了看起来非常简单的替换，它已经需要 5 正则表达式 进行替换.

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

我强烈建议您查看如何编辑模板，而不是使用 jQuery 进行改进.

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

这篇关于在一种情况下去除空格，将它们添加到另一种情况 - jQuery 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！