Replace A Text Using JQuery

Hi I am trying to replace a text using JQuery. but it's replacing with duplicate text. I have tried below code: HTML Code This div contains some text

Solution 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>

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

Solution 2:

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>');
      })

Solution 3:

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);
});
});

Solution 4:

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>

Solution 5:

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)