Question

I’m trying to make a javascript function that will find all the <td> tags in a string and make them red. That way I can track down an errant tag who lacks his comanion </td>. My problem is that when I copy the html of a page, it loses all of the indentation structure. Is there anyway to keep this structure?

$(document).ready(function(){
   var html = $('body').html(); 

   html.replace('<td>', '<td><span class="red">'); 
   html.replace('</td>', '</td></span>'); 
   $('#result').text(html);
});

http://jsfiddle.net/KL3u3/2/

​Also, the string replacements don’t seem to work at all. But one thing at a time.

Thanks for any ideas!

Answer 1

$.ajax({
    url: document.location,
    dataType: "html" // get plain source
}).done(function(text) {
    $(function() {
         $("body").text(text).html(function(_, old) {
             return old.replace(/&lt;\/?td&gt;/g, '<span class="red">$&</span>');
         }).css({"white-space":"pre-wrap", "text-align":"left", "font-family":"monospace"});
    });
});