如果 div 包含文本更新另一个 div 内容答案

【问题标题】：if div contains text update another divs content如果 div 包含文本更新另一个 div 内容
【发布时间】：2018-08-30 10:15:13
【问题描述】：

我有一个magento 网站，我正在尝试扫描表格以查找折扣代码，如果存在折扣代码，则更新表格的另一部分。

我用来尝试实现此目的的代码如下：

    console.log("Discount Code Script Loaded");
$(function(){
    if($('#checkout-review-table-wrapper p').text().replace(/\W/g, '')=="NathanTest9856"){
        console.log("Found code");
        $('span.price p').html("&pound;0.00");
        console.log("Shipping Total Corrected");
    } else{
        console.log("Coupon Code Not Found")
    }    
    console.log("Discount Code Script Completed");
});
console.log($('#checkout-review-table-wrapper p').text().replace(/\W/g, ''));

页面代码简化如下：

<body>
  <div id="checkout-review-table-wrapper">
    <p>
      Discount Code (NathanTest9856)
    </p>
  </div>
<span class="price">
  <p>
     £15.00
 </p>
</span>
</body>

这也可以在 jsfiddle 中找到：https://jsfiddle.net/nlangerdevcenturion/qu6bvrc0/35/

我似乎面临的问题是，它无法在p 标记中检测到 NathanTest9856 的折扣代码。

从下面的错误可以看出：Uncaught TypeError: Cannot read property 'text' of null at centurion.js:12

【问题讨论】：

您的代码正在尝试将DiscountCodeNathanTest9856 与NathanTest9856 进行比较，将您的代码放在一个跨度中，然后从中获取详细信息，这是您代码的更新fiddle。
How to check whether a string contains a substring in JavaScript?的可能重复
上述“可能的”重复不包括 jquery :contains，这似乎很适合这种情况。

标签： javascript jquery html magento

【解决方案1】：

您可以使用 jquery 的 :contains 来检查元素是否包含某些内容（在本例中为一些文本）。

变化：

if($('#checkout-review-table-wrapper p').text().replace(/\W/g, '')=="NathanTest9856"){

到：

if ($('#checkout-review-table-wrapper p:contains("NathanTest9856")')) {

更新代码：

console.log("Discount Code Script Loaded");
$(function() {
  if ($('#checkout-review-table-wrapper p:contains("NathanTest9856")')) {
    console.log("**** Found code ****");
    $('span.price p').html("&pound;0.00");
    console.log("Shipping Total Corrected");
  } else {
    console.log("Coupon Code Not Found")
  }
  console.log("Discount Code Script Completed");
});
console.log($('#checkout-review-table-wrapper p').text().replace(/\W/g, ''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="checkout-review-table-wrapper">
    <p>
      Discount Code (NathanTest9856)
    </p>
  </div>
  <span class="price">
  <p>
     £15.00
 </p>
</span>
</body>

更新小提琴：https://jsfiddle.net/qu6bvrc0/59/

或者，您可以在 .text() 上使用多种原生 javascript 方法，请参阅此处了解更多信息：https://stackoverflow.com/a/1789952/2181514

例如：

if ($('#checkout-review-table-wrapper p').text().indexOf("NathanTest9856")) >= 0) {

【讨论】：

【解决方案2】：

问题在于正则表达式/\W/g。这将替换所有非单词字符（在这种情况下为空格），您将保留不等于 NathanTest9856

的 DiscountCodeNathanTest9856

你可以改用这样的条件

/\(NathanTest9856\)/.test($('#checkout-review-table-wrapper p').text())

它将检查该段落的文本是否存在 (NathanTest9856) 字符串。

【讨论】：