Display html tags on a webpage

serkan sendur 0 Tallied Votes 218 Views Share

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.
Troy III 272 Posting Pro
#
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...

serkan sendur 821 Postaholic Banned Featured Poster

So what?

Troy III 272 Posting Pro

How "what?"!!!

Your precious:

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

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

serkan sendur 821 Postaholic Banned Featured Poster

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

digital-ether 399 Nearly a Posting Virtuoso Team Colleague

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.

serkan sendur commented: good +9
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.