CODEWITHSUNDEEP
javascriptjqueryhtml
Bojjaiah
Bojjaiah

Reputation: 261

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

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

Upvotes: 3

Views: 16650

Answers (5)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

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

Upvotes: 6

Mohammad
Mohammad

Reputation: 21499

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.

Upvotes: 5

Kenneth Hippolite
Kenneth Hippolite

Reputation: 96

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)

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

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>

Upvotes: 2

madalinivascu
madalinivascu

Reputation: 32354

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

Upvotes: 3

Related Questions