Display HTML markup in browser without it being rendered

问题

Starting to implement Javascript, I need to do troubleshooting and would like to output HTML to the screen without it being rendered. I can access the element (in IE) by

document.getElementById("test").outerHTML

I think, but I can't prove what I'm getting to be sure.

So what do I do to have document.write show the entire element including tags?

回答1:

Do two things (all of these, not just one):

Replace HTML markup with entities: HTML.replace(/&/g, '&').replace(/</g, '<') is enough.
Wrap it in <pre></pre> tags so the whitespace is not eliminated and it is shown in a monospace font.

You can also alert(HTML). In IE on Windows (at least) you can press Ctrl-C and paste the text contents of the dialog box elsewhere to see it plainly.

Two serial replaces is faster than using a function as the second argument of replace(). Three serial replaces is also faster when the string is very long as one might expect from a full HTML document.

Also, using document.write is probably not the best way. If you have a div with id output you can access it this way:

document.getElementById('output').innerHTML = '<pre>' + document.body.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre>';

The above code works, I tested it in IE and also in Firefox using FireBug. Note that outerHTML is not supported in Firefox.

回答2:

Do you mean you want the literal, for example, <b>Hello</b> instead of Hello?

If so, just do a quick:

myHTML = myHTML.replace(/[<>&\n]/g, function(x) {
    return {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
       '\n': '<br />'
    }[x];
});

Before outputting it. You can apply this to many other characters, say for instance if you wanted to output whitespace literally.

回答3:

If you're starting out with javascript, now is the best time to learn not to touch unreliable properties; outerHTML is one of them; while supported by IE, Chrome and Opera, Firefox doesn't support it.

Taking the original code, this will work:

var content = document.getElementById("test").outerHTML;
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
docuemnt.write(safe);

But, as much as using "outerHTML" is a bad idea, so is "document.write()". It is much better to have a div with an id on your page, and setting text there, rather than "wherever your code happens to be when document.write() gets called":

<html>
  <head>...</head>
  <body>
    ...
    <div id="mylog"></div>
    ...
 <body>
</html>

And then filling it with either:

// set the content for div 'mylog'
document.getElementById("mylog").innerHTML = content;

or by using something like jQuery, which gives you an API that hides all the crazy may-or-may-not-be-supported things, and guarantees that if you call it, it'll work:

// get html content
var content = $("#test").html();
// make it print safe
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
// add it to the log as text
$("mylog").append(safe);

回答4:

If the problem is not limited to IE, use firefox and use firebug. console.log is very handy. You can always use alert(myString) but becomes very annoying very soon.

回答5:

If this is just for testing and you want to quickly brute force it, you can convert every character in the string to it's &#x; equivalent:

var a = "<div>hello</div>";

var b = a.replace(/./g, function(e){
    return "&#"+e.charCodeAt(0)+";";
});

document.write(b);

Live example: http://jsfiddle.net/J89wh/

回答6:

Here is a quick and easy method I found

1.Download and Install Adobe DreamWeaver,you will get a 30 day trial.

2.Just write the code which you want to put into your website as such in the Design screen of Dream weaver

3.In the code screen,you will get a code for putting the unrendering html code into your website.

For example: When I put the code:

<p>This is a paragraph</p>

inside the design window of DreamWeaver.In the code window,following code is written.

<p>&lt;p&gt;This is a paragraph&lt;/p&gt;</p>

You can do that for every code you want to make appear unrendered in the browser.

来源：https://stackoverflow.com/questions/6221067/display-html-markup-in-browser-without-it-being-rendered

标签

javascript

debugging

outerhtml