Replace A Text Using JQuery
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)
Post a Comment for "Replace A Text Using JQuery"