Replace text each span of a piece of code

Question

I have got a variable with a table:

var tableCode='<table><tr><td><span class'thisone'>'the_text_to_change'</span><span class'thisone'>'other_text_to_change'</span><span class'thisone'>'another_text_to_change'</span></td></tr></table>'

I would want to replace the text inside each span with the class 'thisone', each one depending on the value inside of the class.

So the variable tableCode should be:

var tableCode='<table><tr><td><span class'thisone'>'the_text_changed_1'</span><span class'thisone'>'the_text_changed_2'</span><span class'thisone'>'the_text_changed_3'</span></td></tr></table>'

I have been reading the documentation of each: https://api.jquery.com/each/, but it is for the DOM and not for a variable in Javascript.

So: Read the variable, go throw it and detect the spans with a specific css class and change the value depending on the text.

Thank you very much!!!

1) Your code is wrong (cfr the colors, if you use single quotes everywhere it can't work unless you escape it) 2) Try to actually write some code 3) Come back her if you're stuck — Laurent S.
– Laurent S., Commented Apr 3, 2014 at 14:45

Tushar Gupta - curioustushar · Accepted Answer · 2014-04-03 17:40:08Z

1

One way

Fiddle Demo

var tableCode = "<table><tr><td><span class='thisone'>'the_text_to_change'</span><span class='thisone'>'other_text_to_change'</span><span class='thisone'>'another_text_to_change'</span></td></tr></table>";
tableCode = $(tableCode); //make it a jQuery Object
tableCode.find('span.thisone').text(function (i) {
    return 'the_text_to_change_' + ++i;
}); //find span with class thisone and set text
console.log(tableCode.html()); //to retrieve the changed string use tableCode.html()

edited Apr 3, 2014 at 17:40

answered Apr 3, 2014 at 14:45

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Za7pi Over a year ago

This code is not replacing the text inside the spans

Tushar Gupta - curioustushar Over a year ago

@Za7pi change your table structure too as in fiddle .

Za7pi Over a year ago

It is working, but one thing, if you put the variable like this(adding two tr):

var tableCode = "<tr><td><span class='thisone'>the_text_to_change</span></td></tr><tr></td><span class='thisone'>other_text_to_change</span><span class='thisone'>another_text_to_change</span></td></tr>";

It is not working, it is changing only the first span. Thanks!!

Tushar Gupta - curioustushar Over a year ago

@Za7pi you markup was wrong --> here </tr><tr></td><span you have invalid </td> tag change it to

var tableCode = "<tr><td><span class='thisone'>the_text_to_change</span></td></tr><tr><td><span class='thisone'>other_text_to_change</span><span class='thisone'>another_text_to_change</span></td></tr>";

--> jsfiddle.net/cse_tushar/Wzn88/6

Za7pi Over a year ago

Yes, sorry. I hav changed it and, yes your code does it well, but when you do: console.log(tableCode.html()); It is only printing one spam

|

Amit Joki · Accepted Answer · 2014-04-03 14:45:54Z

0

Do this:

var jqueryObj=$("<table><tr><td><span class='thisone'>'the_text_to_change'</span><span class='thisone'>'other_text_to_change'</span><span class='thisone'>'another_text_to_change'</span></td></tr></table>");
jqueryObj.find('span').each(function(){
$(this).text($(this).attr("class"));
});

Fiddle Demo

answered Apr 3, 2014 at 14:45

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

2 Comments

Za7pi Over a year ago

This code is only filtering by span and not by class name

Za7pi Over a year ago

This is working:

var jqueryObj=$("<table><tr><td><span class='thisone'>'the_text_to_change'</span><span class='thisone'>'other_text_to_change'</span><span class='thisone'>'another_text_to_change'</span></td></tr></table>"); jqueryObj.find('span.thisone').each(function(){ $(this).text('someText'); });

But if i put the variable like this:

var jqueryObj=$("<tr><td><span class='thisone'>'the_text_to_change'</span><span class='thisone'>'other_text_to_change'</span><span class='thisone'>'another_text_to_change'</span></td></tr>");

Without table tag, it is only changing the first span. Why?

Collectives™ on Stack Overflow

Replace text each span of a piece of code

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related