CODEWITHSUNDEEP
javascriptjqueryhtmlwordpressplugins
Sander
Sander

Reputation: 35

How to select a text in HTML without a tag

I'm currently working on a donation form with a Wordpress plugin, but i'm completely stuck with a problem. The plugin automaticaly adds some words and characters inside the price options, which i don't want.

I want the options to be "€ 5" "€ 10" "€ 15" "Own option".

The HTML for the options currently looks like this :

<li>
    <label>
            <input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1"> 
                                / (€ 10,00 iedere maanden)
     </label>
</li>

As you can see, it adds words like "iedere maanden" and "( )" outside the prices. I already found a javascript code which deleted or replaced these words, but it also removed the Radio input inside the label which needs to stay in order for the donation form to work.

The Jquery code that i used to replace the words, but also deleted the input :

$('.donate-box ul li label:not(input)').text(function(i,t){
    return t.replace("iedere maanden", " ");
});

I can't really edit the HTML of the plugin, cause it would be reset when the plugin would be updated.

How can i only select the text / words inside the label without deleting/editing the input field?

Thanks in advance!

Upvotes: 1

Views: 64

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337691

The issue you have is that you need to amend a Node, not the text content of an Element object.

To achieve this you need to loop over every label and get its contents(). Given your HTML structure you can then get the last node within the content and use a regular expression to remove any characters which are not relevant to the price you want to display. Try this:

$('li label').each(function() {
  var node = $(this).contents().last()[0];
  node.textContent = node.textContent.replace(/[^€\d\,]/g, '');      
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <label>
      <input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1"> 
      / (€ 5,00 iedere maanden)
    </label>
  </li>
  <li>
    <label>
      <input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1"> 
      / (€ 10,00 iedere maanden)
    </label>
  </li>
  <li>
    <label>
      <input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1"> 
      / (€ 250,00 iedere maanden)
    </label>
  </li>
</ul>

Upvotes: 1

ThomaS
ThomaS

Reputation: 895

You could be more specific with the string to be replaced To avoid confusion with what is in the radio item With replace("iedere maanden)", " ")

Upvotes: 0

Related Questions