keep indentation structure when putting html into a variable

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!

Wouldn't it be the `span` inside the `td` and not backwards? — Diego, Nov 29 '12 at 17:15
@Diego But no actually.. because the idea is to print out the html structure, turning it into text (so you actually see content on the page) and then the characters will be red. — 1252748, Nov 29 '12 at 17:28
You can't do that like that. You can't output a html string as text and expect some elements to be text and some elements to be actual HTML with working styles etc. It's one or the other, and the only solution to what you're proposing would be to output text and html in seperate functions. — adeneo, Nov 29 '12 at 17:30
@adeneo Yes, that seems to work. http://jsfiddle.net/KL3u3/4/ but it's still not solving the question of keeping the indentation structure :/ — 1252748, Nov 29 '12 at 17:35
[You cannot get the raw source of your HTML document](http://stackoverflow.com/a/3905503/1048572) (see also [this question](http://stackoverflow.com/questions/2070678/does-javascript-have-internal-knowledge-of-the-raw-source-code-of-a-given-docume)). Whenever you stringify the parsed DOM, you will get a valid structure - the html parser already handled the errant ``. — Bergi, Nov 29 '12 at 17:47
@thomas - That's one way to do it. The question is why on earth are you doing this to begin with? — adeneo, Nov 29 '12 at 17:48
@Bergi That's a really good point. But I can give it to the function as a string. http://jsfiddle.net/KL3u3/7/ I guess one possible answer is to make the indentations by searching for `` and `` replacing it with ` ' and ' ' and doing 8 spaces for . — 1252748, Nov 29 '12 at 17:58
"Wouldn't it be the span inside the td and not backwards? – Diego 1 hour ago Yeah, definitely. Corrected. Thank you – thomas 1 hour ago" @thomas - forgot to fix your closing tags — technosaurus, Nov 29 '12 at 18:32

Bergi · Accepted Answer · 2012-11-29T18:10:40.557

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"});
    });
});

edited Nov 29 '12 at 18:10

answered Nov 29 '12 at 17:55

Bergi

630,263
148
957
1,375

Thank you for this, but it does not seem to work for me. http://www2.iscotest.com/test/getsource.html Have I implemented it incorrectly? – 1252748 Nov 29 '12 at 18:09
Works for me (in Opera). Do you get any errors, which browser are you using? Might be an implementation-dependent serialisation of `<td>`. For a safe way have a look at http://stackoverflow.com/a/10416898/1048572 – Bergi Nov 29 '12 at 18:21
Sorry, Bergi, I had to step out for a bit. This works perfectly actually, Thank you! Can you tell me, where to `_` and `old` come from? – 1252748 Nov 29 '12 at 21:08
It's a replace function for http://api.jquery.com/html/ - `_` is the unused index, `old` is the current innerHTML. – Bergi Nov 29 '12 at 21:53

adeneo · Answer 2 · 2012-11-29T17:21:32.510

0

String replace only replaces the first occurence. To do a global replace you would need to use regex.

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

FIDDLE

Also notice that string replace is immutable and will have to be declared back to the variable again.

Why not just wrap the TD's with jQuery ?

$('body').find('td').wrap('<span class="red" />');

edited Nov 29 '12 at 17:21

answered Nov 29 '12 at 17:14

adeneo

312,895
29
395
388

This seems a good idea, but unfortunately the fiddle isn't working for me. :/ – 1252748 Nov 29 '12 at 17:24

keep indentation structure when putting html into a variable

2 Answers2