How to replace text in a table using Jquery(or Javascript)?

Question

I have a table

<table id="t">
     <tr>
           <td> fsabcdf </td>
           <td> xyzabcdf </td>
     </tr>
     <tr>
           <td> fsabcdf </td>
           <td> xyzabcdf </td>
     </tr>
     <tr>
           <td> fsabcdf </td>
           <td> xyzabcdf </td>
     </tr>
</table>

i want to replace "abc"(in td) with "abc" as in the following

<table id="t">
     <tr>
           <td> fs<span class='c2'>abc</span>df </td>
           <td> xyz<span class='c2'>abc</span>df </td>
     </tr>
     <tr>
           <td> fs<span class='c2'>abc</span>df </td>
           <td> xyz<span class='c2'>abc</span>df </td>
     </tr>
     <tr>
           <td> fs<span class='c2'>abc</span>df </td>
           <td> xyz<span class='c2'>abc</span>df </td>
     </tr>
</table>

i googled for the solution but didn't find any.

Thanks in advance.

It might be easier to handle this on the server. Is that a possibility here? — Lix
– Lix, Commented Dec 23, 2013 at 16:31
BTW - you didn't find any results because the implementation will probably be different for each use case... — Lix
– Lix, Commented Dec 23, 2013 at 16:32
No @Lix , I should work on only HTML,and Javascript(or jquery), my work is on view and i can't access controller or model. — Rajeev
– Rajeev, Commented Dec 23, 2013 at 16:33
@Lix, i found methods like wrap() in jquery but the problem is i am unable select part of text from td ( $(what to write here).wrap() ) — Rajeev
– Rajeev, Commented Dec 23, 2013 at 16:36
Yes - this is because the wrap() command operates on elements and not on parts of text. You won't be able to use wrap() in this case. — Lix
– Lix, Commented Dec 23, 2013 at 16:37

Bill Criswell · Accepted Answer · 2013-12-24 12:13:20Z

6

You can do:

$('td').html(function(i, html){
  return html.replace(/abc/g, '<span class="c2">abc</span>'); 
});

This goes through each <td>, looks at its text, then replaces every occurrence of abc with abc wrapped in the span you want.

edited Dec 24, 2013 at 12:13

answered Dec 23, 2013 at 16:32

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

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

2 Comments

Ram Over a year ago

The second argument of the html callback function contains current HTML of the element, using that can be more efficient that creating jQuery objects (not the downvoter).

Rajeev Over a year ago

Thanks for your soutions @BillCriswell, its working but its replacing only first occurence of 'abc' in td, so i have changed that to replace(/abc/g, ''); Now its changing every occurence

geedubb · Accepted Answer · 2013-12-23 16:40:34Z

2

Something like:

$('td').each(function () {
    $(this).html($(this).html().replace('abc', '<span class="c2">abc</span>'));
});

http://jsfiddle.net/Ru8XX/

edited Dec 23, 2013 at 16:40

answered Dec 23, 2013 at 16:33

geedubb

4,0574 gold badges29 silver badges38 bronze badges

1 Comment

Fabiosoft Over a year ago

this worked for me, not the marked answer

Lix · Accepted Answer · 2013-12-23 16:43:10Z

1

Try this:

$('#t td').each(function(){
    $(this).html( $(this).html().replace("abc","<span class='c2'>abc</span>") );
});

edited Dec 23, 2013 at 16:43

Lix

48.2k12 gold badges107 silver badges134 bronze badges

answered Dec 23, 2013 at 16:39

Ringo

3,9973 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to replace text in a table using Jquery(or Javascript)?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related