Display html tags on a webpage

By serkan sendur on Mar 7th, 2009 3:37 am

Displays the html tags without rendering on a webpage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function firstMethod()
    {
        var str = document.getElementById("tbl").innerHTML.replace(/[<]/g,'&lt;');
        str = str.replace(/[>]/g,'&gt;');
        document.getElementById("displayHTML").innerHTML = str;
    }
    function secondMethod()
    {
        document.getElementById("displayHTML").innerText = document.getElementById("tbl").innerHTML;
    }
    </script>
</head>
<body>
    <div id="displayHTML"></div>
    <table border="1" id="tbl">
        <tr>
            <td style="width: 100px">
                1</td>
            <td style="width: 100px">
                2</td>
            <td style="width: 100px">
                3</td>
        </tr>
        <tr>
            <td style="width: 100px">
                4</td>
            <td style="width: 100px">
                5</td>
            <td style="width: 100px">
                6</td>
        </tr>
        <tr>
            <td style="width: 100px">
                7</td>
            <td style="width: 100px">
                8</td>
            <td style="width: 100px">
                9</td>
        </tr>
    </table>
    <input type="button" value="use conventional method" onclick="firstMethod()" />
    <input type="button" value="use serkan's method" onclick="secondMethod()" />
</body>
</html>

This is a good example of using javascript innerText property which is not 
as popular as innerHTML property.

2 Years Ago

#
This is a good example of using javascript innerText property which is not
#
as popular as innerHTML property

Yeah, good old sanity method, -not supported by crippled "modern" browsers until yesterday!

In fact, firefox still dosn't - currently tested in fx 3.5.3 no error but no go either...

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

So what?

serkan sendur

Postaholic

Banned

2,062 posts since Jan 2008

Reputation Points: 854

Solved Threads: 127

2 Years Ago

How "what?"!!!

Your precious:

<input type="button" value="use serkan's method" onclick="secondMethod()" />

"SERKAN's METHOD" type of think - willNOT work in Fire-Fox and other Netscape lurking children of the internet.
- What "what" ?

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

if it does not work in those browsers, just find the substitute and post it to here instead of useless commenting.

serkan sendur

Postaholic

Banned

2,062 posts since Jan 2008

Reputation Points: 854

Solved Threads: 127

2 Years Ago

Show Comments

Something like this should work:

/**
 * Return html numeric entities encoded string
 */
String.prototype.toHtmlEntities = function() {
	return this.replace(/[^a-z0-9\.\-\_\s\t]/ig, function(c) {
		return '&#'+c.charCodeAt(0)+';';
	});
};

Example:

'<div>This & that</div>'.toHtmlEntities();

It replaces every non-alphabetic and numeric character (excluding a few defined in the regex pattern) with their character codes.

digital-ether

Nearly a Posting Virtuoso

Moderator

1,293 posts since Sep 2005

Reputation Points: 461

Solved Threads: 101

This article has been dead for over three months

You