Hi I am trying to replace a text using JQuery. but it's replacing with duplicate text.

I have tried below code:

HTML Code

<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

jQuery Code

$(document).ready(function(){
    var text = $('[class="text_div"]').text();
  var new_text = text.replace("contains", "hello everyone");  
  $('[class="text_div"]').text(new_text);
});

Resulted OUT Put

This div hello everyone some text. This div contains some text. This div contains some text. 
This div hello everyone some text. This div contains some text. This div contains some text. 
This div hello everyone some text. This div contains some text. This div contains some text.

Expecting Out Put

This div hello everyone some text.
This div hello everyone some text. 
This div hello everyone some text.

Hi I am trying to replace a text using JQuery. but it's replacing with duplicate text.

I have tried below code:

HTML Code

<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

jQuery Code

$(document).ready(function(){
    var text = $('[class="text_div"]').text();
  var new_text = text.replace("contains", "hello everyone");  
  $('[class="text_div"]').text(new_text);
});

Resulted OUT Put

This div hello everyone some text. This div contains some text. This div contains some text. 
This div hello everyone some text. This div contains some text. This div contains some text. 
This div hello everyone some text. This div contains some text. This div contains some text.

Expecting Out Put

This div hello everyone some text.
This div hello everyone some text. 
This div hello everyone some text.

• javascript
• jquery
• html

5 Answers 5

Try like this

  $('.text_div').each(function(x){
    var new_text = $(this).text().replace("contains", "hello everyone"); 
    $(this).text(new_text);
  })

for the question in the comment try:

<a class="text_div">
    This div contains - some text.
</a>
  $('.text_div').each(function(x){
        var new_text = $(this).text().split('-'); 
        $(this).html(new_text[0]+'span style="color:red;font:bold;">'+new_text[1]+'</span>');
      })

You are trying to get text of all .text_div element and change it.

Use jquery .text( function ) to changing text of element one by one.

$(".text_div").text(function(index, text){
    return text.replace("contains", "hello everyone");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

Also you can use each() method to do this work.

You have multiple divs try a loop

$(document).ready(function(){
     $('[class="text_div"]').each(function(i,v){
    var text =$(v).text();
  var new_text = text.replace("contains", "hello everyone");  
  $(v).text(new_text);
});
});

Firstly you can use a class selector to get the elements, instead of a much slower (comparatively) attribute selector: $('.text_div').

Your actual issue is because you are selecting all the elements together, hence the text() method returns the text of all elements in a single string. To fix this you could loop through each element individually, using each():

$(document).ready(function(){
    $('.text_div').each(function() {
        var text = $(this).text().replace("contains", "hello everyone");
        $(this).text(text);
    });
});

Better still would be to provide a function to the text() method which is executed against each element in the matched set:

$(document).ready(function(){
    $('.text_div').text(function(i, t) {
        return t.replace("contains", "hello everyone");
    });
});

$(document).ready(function() {
  $('.text_div').text(function(i, t) {
    return t.replace("contains", "hello everyone");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

I didn't test the code, but it seems

var text = $('[class="text_div"]').text(); must return the text for all three elements... (eg the input will repeat three times so the output will as well)