By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,651 Members | 1,757 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,651 IT Pros & Developers. It's quick & easy.

Encode And Decode entirety of Text or Html to '%xx' format

P: n/a
How would I modify this form
to encode *all* the characters
in the 'source' textarea to the
'%xx' format & place result
code into the 'output' textarea?
(cross browser compatable)

Any help is appreciated.

Regards.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Encode And Decode Entire Text or Html to '%xx' format
</title>
</head>
<body>
Text and Html "%xx" Converter<br>
<form name="form1" method="post" action="">
Original Text:<br>
<textarea name="source" cols="79" rows="8" wrap="VIRTUAL">Original Text or Html code
to have the *entirety* of
the characters converted
to '%xx' formated codes.
</textarea>
<br>
<br>
<br>
Output Text<br>
<textarea name="output" cols="79" rows="8" wrap="VIRTUAL"></textarea>
<br>
&nbsp;
<input type="button" name="Encode" value="Encode">
&nbsp;
<input type="button" name="Decode" value="Decode">
&nbsp;
<input name="reset" type="Reset" value="Reset">
</form>
</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Newbie wrote:
How would I modify this form
to encode *all* the characters
in the 'source' textarea to the
'%xx' format & place result
code into the 'output' textarea?
(cross browser compatable)

Any help is appreciated.

Regards.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Encode And Decode Entire Text or Html to '%xx' format
</title>
</head>
<body>
Text and Html "%xx" Converter<br>
<form name="form1" method="post" action="">
Original Text:<br>
<textarea name="source" cols="79" rows="8" wrap="VIRTUAL">Original Text or Html code
to have the *entirety* of
the characters converted
to '%xx' formated codes.
</textarea>
<br>
<br>
<br>
Output Text<br>
<textarea name="output" cols="79" rows="8" wrap="VIRTUAL"></textarea>
<br>
&nbsp;
<input type="button" name="Encode" value="Encode">
&nbsp;
<input type="button" name="Decode" value="Decode">
&nbsp;
<input name="reset" type="Reset" value="Reset">
</form>
</body>
</html>


<script type="text/javascript">
function encode(f) {
var ta = f.elements['source'].value;
var hex;
var s = [];
for (var i = 0; i < ta.length; i++) {
hex = (ta.charCodeAt(i) % 256).toString(16);
s.push((hex.length < 2 ? '0' : '') + hex);
}
f.elements['output'].value = '%' + (s.join('%')).toUpperCase();
}
function decode(f) {
var ta = f.elements['source'].value.split(/%/);
var s = [];
for (var i = 0; i < ta.length; i++) {
s.push(String.fromCharCode(parseInt(ta[i], 16)));
}
f.elements['output'].value = s.join('');
}
</script>

<input type="button" name="Encode" value="Encode" onclick="encode(this.form);">
<input type="button" name="Decode" value="Decode" onclick="decode(this.form);">

I hope I get a good mark from your teacher.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq


Jul 23 '05 #2

P: n/a
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message news:41***************@agricoreunited.com...
| Newbie wrote:
|
| > How would I modify this form
| > to encode *all* the characters
| > in the 'source' textarea to the
| > '%xx' format & place result
| > code into the 'output' textarea?
| > (cross browser compatable)
| >
| > Any help is appreciated.
| >
| > Regards.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Encode And Decode Entire Text or Html to '%xx' format
</title>
</head>
<body>
<script type="text/javascript">
<!--
function encode(f) {
var ta = f.elements['source'].value;
var hex;
var s = [];
for (var i = 0; i < ta.length; i++) {
hex = (ta.charCodeAt(i) % 256).toString(16);
s.push((hex.length < 2 ? '0' : '') + hex);
}
f.elements['output'].value = '%' + (s.join('%')).toUpperCase();
}
function decode(f) {
var ta = f.elements['source'].value.split(/%/);
var s = [];
for (var i = 0; i < ta.length; i++) {
s.push(String.fromCharCode(parseInt(ta[i], 16)));
}
f.elements['output'].value = s.join('');
}
//-->
</script>
Text and Html "%xx" Converter<br>
<form name="form1" method="post" action="">
Original Text:<br>
<textarea name="source" cols="79" rows="8" wrap="VIRTUAL">Original Text or Html code
to have the *entirety* of
the characters converted
to '%xx' formated codes.
</textarea>
<br>
<br>
<br>
Output Text<br>
<textarea name="output" cols="79" rows="8" wrap="VIRTUAL"></textarea>
<br>
&nbsp;
<input type="button" name="Encode" value="Encode" onclick="encode(this.form);">
&nbsp;
<input type="button" name="Decode" value="Decode" onclick="decode(this.form);">
&nbsp;
<input type="reset" name="Reset" value="Reset">
</form>
</body>
</html>

| I hope I get a good mark from your teacher.
|
| --
| Grant Wagner <gw*****@agricoreunited.com>
| comp.lang.javascript FAQ - http://jibbering.com/faq

I'm teaching myself & my teacher was really impressed :-)

Thanks.

PS:
Will this work with 3.xx and 4.xx old JS enabled browsers too?
Jul 23 '05 #3

P: n/a
Newbie wrote:
<script type="text/javascript">
<!--
<!-- not needed. Omit.
f.elements['output'].value = s.join('');
}
//-->
//--> not needed. Omit.
PS:
Will this work with 3.xx and 4.xx old JS enabled browsers too?


I would have said it'll work in almost any browser capable of JavaScript and forms, but I just discovered
that charCodeAt() wasn't implemented until JScript 5.5 <url:
http://msdn.microsoft.com/library/en...nformation.asp />. That has to be a
typo. I can't believe Microsoft didn't implement the String#charCodeAt() method until version 5.5. Anyway,
assuming that MS URL is right, the code I provided will probably only work in Internet Explorer 5.5 and
higher, although it should work in Netscape versions as low as 3 <url:
http://devedge.netscape.com/library/...g.html#1196647 />.

To make it work in versions of JScript older then 5.5, you'll have to add the following to your code:

if (!String.prototype.charCodeAt) {
String.prototype.charCodeAt = function (index) {
var charAt = this.charAt(index);
var i = 256;
while (i--) {
if (charAt == String.fromCharCode(i)) {
return i;
}
}
return 0;
}
}

Basically you're rolling your own String#charCodeAt() method that tests the character against each character
code from 255 to 0. I tested the method above for some simple cases, it seems to work correctly (until you
throw something like "String.fromCharCode(1027).charCodeAt2(0)" at it). Of course, if the browser is so old
that you have to use the above method definition, then it's likely it doesn't support unicode either. And
quite frankly, all the code I gave you assumes character codes in the range 0..255 (0x00..0xFF). Things would
be a bit more complicated if you allowed (0x0000..0xFFFF).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #4

P: n/a
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message news:41***************@agricoreunited.com...
| Newbie wrote:
|
| > <script type="text/javascript">
| > <!--
|
| <!-- not needed. Omit.
|
| > f.elements['output'].value = s.join('');
| > }
| > //-->
|
| //--> not needed. Omit.
|
| > PS:
| > Will this work with 3.xx and 4.xx old JS enabled browsers too?
|
| I would have said it'll work in almost any browser capable of JavaScript and forms, but I just discovered
| that charCodeAt() wasn't implemented until JScript 5.5 <url:
| http://msdn.microsoft.com/library/en...nformation.asp />. That has to be a
| typo. I can't believe Microsoft didn't implement the String#charCodeAt() method until version 5.5. Anyway,
| assuming that MS URL is right, the code I provided will probably only work in Internet Explorer 5.5 and
| higher, although it should work in Netscape versions as low as 3 <url:
| http://devedge.netscape.com/library/...g.html#1196647 />.
|
| To make it work in versions of JScript older then 5.5, you'll have to add the following to your code:
|
| if (!String.prototype.charCodeAt) {
| String.prototype.charCodeAt = function (index) {
| var charAt = this.charAt(index);
| var i = 256;
| while (i--) {
| if (charAt == String.fromCharCode(i)) {
| return i;
| }
| }
| return 0;
| }
| }
|
| Basically you're rolling your own String#charCodeAt() method that tests the character against each character
| code from 255 to 0. I tested the method above for some simple cases, it seems to work correctly (until you
| throw something like "String.fromCharCode(1027).charCodeAt2(0)" at it). Of course, if the browser is so old
| that you have to use the above method definition, then it's likely it doesn't support unicode either. And
| quite frankly, all the code I gave you assumes character codes in the range 0..255 (0x00..0xFF). Things would
| be a bit more complicated if you allowed (0x0000..0xFFFF).
|
| --
| Grant Wagner <gw*****@agricoreunited.com>
| comp.lang.javascript FAQ - http://jibbering.com/faq

Thanks again for all of your help.
It is greatly appreciated that you
have taken the time & even went
to the trouble of checking MS &
Netscape, which I did not expect.

Kindest Regards.

PS: My teacher thanks you also :-)
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.