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
– Diego, Commented Nov 29, 2012 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 <td><span>content</span></td> on the page) and then the characters <td> will be red. — 1252748
– 1252748, Commented Nov 29, 2012 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
– adeneo, Commented Nov 29, 2012 at 17:30
You cannot get the raw source of your HTML document (see also this question). Whenever you stringify the parsed DOM, you will get a valid structure - the html parser already handled the errant </td>. — Bergi
– Bergi, Commented Nov 29, 2012 at 17:47

Bergi · Accepted Answer · 2012-11-29 18:10:40Z

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, 2012 at 18:10

answered Nov 29, 2012 at 17:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

4 Comments

1252748 Over a year ago

Thank you for this, but it does not seem to work for me. www2.iscotest.com/test/getsource.html Have I implemented it incorrectly?

Bergi Over a year ago

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 stackoverflow.com/a/10416898/1048572

1252748 Over a year ago

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?

Bergi Over a year ago

It's a replace function for api.jquery.com/html - _ is the unused index, old is the current innerHTML.

adeneo · Accepted Answer · 2012-11-29 17:21:32Z

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, 2012 at 17:21

answered Nov 29, 2012 at 17:14

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

1252748 Over a year ago

This seems a good idea, but unfortunately the fiddle isn't working for me. :/

Collectives™ on Stack Overflow

keep indentation structure when putting html into a variable

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related