Take the 2-minute tour ×

This is the source of my simple HTML page (save as .html file):

<title>Untitled Document</title>
<script type="text/javascript">
function convert(){
 var ele1 = document.getElementById("somewhere");
 var replaced;
 replaced = ele1.value;
 replaced = replaced.replace(/&/ig, "&amp;");
 replaced = replaced.replace(/</ig, "&lt;");
 replaced = replaced.replace(/>/ig, "&gt;");
 replaced = replaced.replace(/'/ig, "&#039;");
 replaced = replaced.replace(/"/ig, "&quot;");
 ele1.value = replaced;

<textarea cols="70" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(250, 250, 250); border: 2px solid rgb(204, 204, 204);"></textarea><br />
<input onclick="convert();" type="button" value="Encode" />

What this page does is, any code put in the textarea is HTML-encoded/escaped when the "Encode" button is clicked — essentially all instances of &, <, >, ' and " in the input code are replaced with their respective HTML entities.

How do I modify the JavaScript code in the page, so that only the input code between <pre> and </pre> tags is modified as aforementioned?

EDIT: As I see it I wasn't clear. First you need to save the HTML code I gave above into a .html file and open it in a browser. Then you will see a textarea/textbox with an "Encode" button below it.

Any code put into the text area is escaped when the "Encode" button is pressed.

I want to modify the JavaScript code in the HTML code above, so that (for instance) if I put the following code in the textbox:

It's mine.
It's also mine.

and hit the "Encode" button, only the code between <pre> tags is escaped. I hope I am clear this time.

Hope I am clear, and can get some help. Thanks.

share|improve this question
The hole idea of escaping HTML this way is a really bad idea, if you are doing this at least use a well know library for escaping html –  ntziolis Mar 10 '12 at 10:25
@ntziolis : I am escaping HTML because the <pre> has issues with some charachers, especially the <. So, the aforementioned code is all I need, right? –  its_me Mar 10 '12 at 10:28
Actually, &#039; is not an entity reference but a (numeric) character reference. –  Gumbo Mar 10 '12 at 10:38
@Gumbo: Oh! I don't know how to code. That's the HTML/JS I grabbed from elsewhere because I needed it. I thought HTML entities is a common name. Sorry abt that. –  its_me Mar 10 '12 at 10:42
@badlearner Unfortunately, it is. But it has become the de-facto term just like everything can referred to as a tag. –  Gumbo Mar 10 '12 at 10:49

2 Answers 2

up vote 1 down vote accepted

Insead of using:

var ele1 = document.getElementById("somewhere");

You could use:

var ele1 = document.getElementsByTagName("pre");

However this might return multiple elements since there could be multiple <pre> sections in your html.

But again, if your goal is to produce a safe output, escaping is not a preferred solution. Have a look at Markdown for example:

share|improve this answer
Thanks a lot for pointing me in the right direction (the link). I actually forgot that adding 4 spaces or a tab before each line of the code is all I need. Damn! Thanks again! –  its_me Mar 10 '12 at 10:37

I'm not sure into what you're trying to convert. ele1.innerHTML parses the HTML exactly how it should to be parsed. Ie. < will be converted to &lt;, which is valid HTML.


function convert(){
  var txt=document.getElementById('somewhere');

Quotemarks and hipsals are valid html, but if you want have them replaced:

var txt=document.getElementById('somewhere');
var txti=txt.innerHTML;
txti=txti.replace(/\"/g, "&quot;");
txti=txti.replace(/\'/g, "&#039;");
share|improve this answer
May be I wasn't clear before. I have edited my question to be more clear. Please take a look. –  its_me Mar 10 '12 at 10:48
@badlearner I've edited my answer. This is what you've tried to implement?. –  Teemu Mar 10 '12 at 11:05
Partly yes. Yours + ntziolis' answer = complete answer to my question. Thanks a lot Teemu! –  its_me Mar 10 '12 at 12:18

Your Answer


