![[ info ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLLqADnAK9xPqLtqTQ6fPmxed7GEnIR73zosubICybujchccNTHrafmIMSAXrTEbdlchQvuLkgA2W8oy70RwbX3Re7kILy6g28-KfaNLWAK9OfkOCtOEbA23P3BAmMk0r1Sq0k_SLHGo/s1600/devinfo.png)
Hi friends, if you have a website and there you want so your HTML code, if you have such kind of requirement then definitely this blog is very help full. Now a days there are so many javascript and jquery plugins are available for such requirement, but in this post I will use simple javascript code to full fill this requirement.
Following are the basic steps to do this task,
- Encoding the HTML code.
- Displaying encoded HTML code using <pre></pre> tag.
Step 1 : (Encoding the HTML code)
In this step we will convert the simple HTML code into its encoded format by using javascript. Encoding the HTML code means replacing the "<" and ">" tag by "<" and ">" respectively. Now the question how can we do this replacement ?. Its very simple, by using replace() in javascript we can do this replacement. Following is the code to replacement,
replace(/</g,"<").replace(/>/g,">")
Now I will develop a small HTML App, that will convert normal HTML to its encode format. We will create a HTML file named as encodehtml.html and write the following code,
<!DOCTYPE html>
<html>
<head>
<script>
function encodeHTML(){
var plainHTML = document.getElementById('textarea1').value;
document.getElementById('textarea2').value = plainHTML.replace(/</g,"<") .replace(/>/g,">");
}
</script>
<style>
textarea{
border: 1px solid black;
}
</style>
</head>
<body>
<textarea cols = "60" rows = "30" id = "textarea1"></textarea>
<input type = "button" value = "Encode" onclick = "javascript: encodeHTML()">
<textarea cols = "60" rows = "30" id = "textarea2"></textarea>
</body>
</html>
The App will look as follows,
As shown in above, you need to keep the plain HTML code in first textarea, after clicking Encode button you will get the encoded format HTML data.
Step 2 : (Displaying encoded HTML code)
After getting the encoded format HTML code in above step, we need to place this with in the <pre></pre>, then we will see the HTML code on the HTML page or on the browser. For example,
<pre>
// Encoded HTML Code..
</pre>
Demo Download
Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also html coder
ReplyDelete