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.

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.

• javascript
• jquery
• html
• replace

• It might be easier to handle this on the server. Is that a possibility here? – 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 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 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 Commented Dec 23, 2013 at 16:36
• Yes - this is because the wrap() mand operates on elements and not on parts of text. You won't be able to use wrap() in this case. – Lix Commented Dec 23, 2013 at 16:37

3 Answers 3

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.

Something like:

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

http://jsfiddle/Ru8XX/

Try this:

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