Replace text in label that has an input inside, without affecting input

Question

I have this code:

<label class="hulkapps_check_option">
<input type="checkbox" data-price="4000.00">
Basic banner design (+$ 4000.00)
</label>

I need to find the text ".00" in the label and replace it with " MXN" but without affecting the input. Whenver I try anything to replace the text it removes the input inside the label. How can I replace a piece of text in the label, without removing the input inside of it?

Possible duplicate of [How do I select text nodes with jQuery?](https://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — freedomn-m, Jun 04 '19 at 07:20
Possibly duplicate of: https://stackoverflow.com/a/13817123/2181514 — freedomn-m, Jun 04 '19 at 07:31

freedomn-m · Accepted Answer · 2019-06-04T07:33:52.370

1

The first option is it put your text inside a <span>, then it will be easily accessible from jQuery. jQuery isn't designed to handle text-only nodes very well.

If you can't change the HTML for whatever reason, then you can use .contents() and .this.nodeType === 3 (where 3 is a text node).

$('.hulkapps_check_option').contents().each(function() {
  if (this.nodeType === 3) {
    this.textContent
      ? this.textContent = this.textContent.replace(/\.00/g, " MX")
      : this.innerText = this.innerText.replace(/\.00/g, " MX")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hulkapps_check_option">
  <input type="checkbox" data-price="4000.00">
  Basic banner design (+$ 4000.00)
</label>

You could use .html() to get the text with the input.

While this works in this scenario - it's too brittle to work in the general case (eg if you wanted to change all "put" with "POST" then you'd get <inPOST type="checkbox").

You also lose any events you might have had against any elements inside the label.

var h = $(".hulkapps_check_option").html().replace(/\.00/g, " MXN");
$(".hulkapps_check_option").html(h);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="hulkapps_check_option_before">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

<hr/>

<label class="hulkapps_check_option">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

edited Jun 04 '19 at 07:33

answered Jun 04 '19 at 07:19

freedomn-m

21,261
4
28
53

This solution works! Thank you for that. I don't really understand the code. Could you please provide a bit of explanation to what this is: .textContent and where it comes from? and also the interrogation and : symbol on the following lines? Where can I find more information about what they are and how they're used? Also, could you explain what type of formatting this is? (/\.00/g, " MX"). What's the /\ and /g? Thank you so much! – Mel Dominguez Jun 04 '19 at 23:08
1

`:?` - https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript – freedomn-m Jun 05 '19 at 08:23
1

`.textContent` - in jquery we do `$("#id").text()` - the `.text()` part translates to `.textContent` - but in some browsers that doesn't exist, so you have to use `.innerText` instead. Good old browser-wars / incompatibilities (that no doubt someone will say no longer exists). That's partly why jquery is so popular, no need to worry about it. It's micro-optimisation to use `.textContent` rather than `$().text()`. – freedomn-m Jun 05 '19 at 08:25
1

`.replace(regex, replacement)` - use `.replace(/regex/g, "replacement)` where `//` provide the regex and `/g` indicates all occurrences. `\.` = match "." as `.` is "match any single character" and `00` means "match 00" – freedomn-m Jun 05 '19 at 08:27
1

TBH, not sure `$().text` works with text nodes, so that's why I left it using .textContent / .innerText. https://stackoverflow.com/a/13817123/2181514 – freedomn-m Jun 05 '19 at 08:32
amazing explanation for every bit. Thank you so much for taking the time to provide more information! – Mel Dominguez Jun 07 '19 at 05:32
another question if you kindly have the time... why do you have to add regex inside of the .replace()? Why wouldn't this work?`.replace(".00"," MXN")`? – Mel Dominguez Jun 07 '19 at 05:49
Replace can use *either* a regex or a string. You can use the string to replace, it's the equivalent in this case as the "regex" is very static. You could change it to `/\.\d\d/g` which would remove *any* decimal places, not use ".00" – freedomn-m Jun 07 '19 at 07:51

score 0 · Answer 2 · edited Jun 04 '19 at 07:14

0

You can use below code, I just check its working for me.

$(".hulkapps_check_option").text(function() {
  return $(this).text().replace(".00", " MXN");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="hulkapps_check_option_before">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

<hr/>

<label class="hulkapps_check_option">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

edited Jun 04 '19 at 07:14

freedomn-m

21,261
4
28
53

answered Jun 04 '19 at 06:37

Alfaraz Shaikh

134
4

Hi, I converted your code to a snippet - as you can see, `.text()` removes the checkbox. – freedomn-m Jun 04 '19 at 07:15
I tried this and it removes the checkbox: [link](http://prntscr.com/nxovrr) – Mel Dominguez Jun 04 '19 at 23:02

score 0 · Answer 3 · answered Jun 04 '19 at 08:14

This would be a way to achieve your goal using the standard Javascript DOM API:

const label = document.querySelector('.hulkapps_check_option');
const labelTextNode = label.childNodes[2];
label.removeChild(label.childNodes[2]);
label.appendChild(new Text(labelTextNode.wholeText.replace('.00', 'MXN')));

<label class="hulkapps_check_option">
  <input type="checkbox" data-price="4000.00">
  Basic banner design (+$ 4000.00)
</label>

Replace text in label that has an input inside, without affecting input

3 Answers3