时间戳

首页 > 解决方案 > 在一种情况下去除空格，在另一种情况下添加它们 - jQuery 不起作用

jquery - 在一种情况下去除空格，在另一种情况下添加它们 - jQuery 不起作用

问题描述

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

本质上，我想让文本更漂亮以提高可用性。

当前输出： BBQ Pack – Disposable×2（£10.00 - 一次），

所需输出： BBQ 包 - 一次性 × 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 的错误：

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

关于为什么这不起作用以及如何实现“x”两侧空格的预期结果的任何建议，删除“（”和“）”之前和之后的空格并删除结尾“，”会很棒！

标签： jquerywoocommercetrim

解决方案

该格式应由 WooCommerce 完成。

但是如果你坚持用 jQuery 来做，就像你之前的问题一样......它会是这样的：

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 个正则表达式来进行替换。

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

推荐阅读