How to replace text in using jquery

Question

<label>
  Auto zoom 
  <input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;">
  <span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;">
    <small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small>
  </span>
</label>

I have this code above, I want to replace "Auto zoom" to "Test", how do I do that?

$("#div label:contains('Auto zoom')").text("Test");

I tried using the code above, which is obviously not working, it will remove the input type checkbox behind too...

Your code works if your remove `#div`, since you haven't added this to your HTML, then we can't know if it's supposed to be there or not. — Carsten Løvbo Andersen, May 22 '17 at 08:48
Possible duplicate of [How do I select text nodes with jQuery?](http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — freedomn-m, May 22 '17 at 08:52
@CyrilBeeckman because that's what you're supposed to do with checkboxes...? The `label` wrapping the checkbox expands its hit area — Rory McCrossan, May 22 '17 at 09:01
@RoryMcCrossan BUT, label already expand hit area because when you click on label it the same thing like you click on checkbox... no ? — Cyril Beeckman, May 22 '17 at 09:03
I don't understand what you mean, but hopefully this makes it clearer to you: https://jsfiddle.net/0y5k5yLk/ — Rory McCrossan, May 22 '17 at 09:04
@freedomn-m Yes but it's logique to add the `for` attribute on a label.. It's the good practice to separate input of label.. — Cyril Beeckman, May 22 '17 at 09:07
@CyrilBeeckman I wouldn't say either is a 'best practice'. They both have perfectly valid use cases — Rory McCrossan, May 22 '17 at 09:14

Rory McCrossan · Accepted Answer · 2017-05-22T09:07:47.367

The easiest way to do this would be to wrap the text in another element, like a span, then change the text().

Assuming you cannot change the HTML, then you can do what you require by using contents() and retrieving the first textNode, like this:

var label = $('label').contents().filter(function() {
  return this.nodeType == 3 && this.nodeValue.trim();
})[0];

label.nodeValue = label.nodeValue.replace('Auto zoom', 'Test');

.switchery-small {
  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  border-color: rgb(223, 223, 223);
  background-color: rgb(255, 255, 255);
  transition: border 0.4s, box-shadow 0.4s;
}

.switchery-small small {
  left: 0px;
  transition: background-color 0.4s, left 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  Auto zoom Foo Bar
  <input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;">
  <span class="switchery switchery-small">
    <small></small>
  </span>
</label>

Also note that I moved the inline style attribute out to rules in an external stylesheet. This is much better as it de-clutters the HTML and separate the HTML from the styling.

Can I only replace the specific text "Auto Zoom" to "Test"? Since there are tons of label in that html. — Alvin, May 22 '17 at 09:07
Yep, you can use `replace()` to target only the words you want to change. I updated the answer for you. — Rory McCrossan, May 22 '17 at 09:08

score 0 · Answer 2 · answered May 22 '17 at 08:53

I would recommend wrapping your text around span tag.

$(".labelTitle").text("Test");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span class="labelTitle">Auto zoom </span>
<input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;">
<small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small>
</span>
</label>

I'm not the one coded these, I'm using jquery to edit a web game..
Zoom
Auto zoom
How should i add span? — Alvin, May 22 '17 at 09:03

kari kalan · Answer 3 · 2017-05-22T09:01:39.600

Try Code: Just Remove # and Div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label>Auto zoom <input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;"><span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;"><small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small></span></label>

<script type="text/javascript">
$(document).ready(function(){
$("label:contains('Auto zoom')").text("Test");
});
</script>

Like all the other answers before it, and the question itself, this also removes the inputs. — freedomn-m, May 22 '17 at 09:01

score -2 · Answer 4 · answered May 22 '17 at 08:52

-2

You have to select the with:

$("label:contains('Auto zoom')").text('Test');

With your jquery:

$('#div')...

You are selecting a element with id='div'. If you can put a id or class in the label element, is too much easy, like:

<label id='label_test'> Auto zoom...</label>

Then you can do like:

$('#label_test').text("Test");

Hope it helps!

answered May 22 '17 at 08:52

JP. Aulet

4,375
4
26
39

1

The question is about selecting just the text without also removing any nested controls. – freedomn-m May 22 '17 at 08:53

How to replace text in using jquery

4 Answers4

Zoom