javascript - Replace a text using JQuery

Question

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.

Answer 1

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>