Display html tags on a webpage

serkan sendur 0 219 Views

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.
Member Avatar for Troy III
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...

Edited by Troy III because: n/a
Member Avatar for serkan sendur
serkan sendur 821 Postaholic

So what?

Member Avatar for Troy III
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" ?

Edited by Troy III because: n/a
Member Avatar for serkan sendur
serkan sendur 821 Postaholic

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

Member Avatar for digital-ether
digital-ether 399 Nearly a Posting Virtuoso

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.

Edit Preview