Change exact text with jQuery

Question

I have a div on my website which contains text.

<div class="bloc_thumb_produit">
    <span class="price">
        <span class="woocommerce-Price-amount amount">0,00
        <span class="woocommerce-Price-currencySymbol">&euro;</span>
        </span>
    </span>
</div>

I want to change the text "0,00" by "price on demand"

I can do it using this jQuery code :

$(".bloc_thumb_produit .price .amount:contains('0,00')").html("price on demand");

It works fine but only when text is "0,00", when text is "40,00", my text is also changed.

I'm trying to find a way to match exact text "0,00" and also delete spans around the text, to have this :

<div class="bloc_thumb_produit">
    <span class="price">
         <span class="woocommerce-Price-amount amount">price on demand</span>
    </span>
</div>

Instead of this :

<div class="bloc_thumb_produit">
    <span class="price">
        <span class="woocommerce-Price-amount amount"> 0,00
        <span class="woocommerce-Price-currencySymbol">&euro;</span>
        </span>
    </span>
</div>

Possible duplicate of [Jquery something like :contains(), but to match exactly phrase](http://stackoverflow.com/questions/7571117/jquery-something-like-contains-but-to-match-exactly-phrase) — Keith.Abramo, Apr 10 '17 at 18:52

score 0 · Answer 1 · answered Apr 10 '17 at 18:53

As a first option you might need an if condition here to check that if your text startsWith 0,00.

if ($(".bloc_thumb_produit .price .amount").text().startsWith("0,00"))
  $(".bloc_thumb_produit .price .amount").html("price on demand");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bloc_thumb_produit"><span class="price"><span class="woocommerce-Price-amount amount">0,00<span class="woocommerce-Price-currencySymbol">&euro;</span></span>
  </span>
</div>

If not, and you can consider 2nd option, then add an extra data-* attribute to your html to contain amount and you can use it without if condition as follows:

$(".bloc_thumb_produit .price .amount[data-amt^='0,00']").html("price on demand");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bloc_thumb_produit"><span class="price"><span class="woocommerce-Price-amount amount" data-amt="0,00">0,00<span class="woocommerce-Price-currencySymbol">&euro;</span></span>
  </span>
</div>

Change exact text with jQuery

1 Answers1