Javascript character count problem

@BroodmdhMar 01.2010

I have a textarea that I want to limit to 4000 characters. I have a piece of text which Notepad++ and Word both tell me is exactly 4000 characters, but my javascript seems to think it is 4010 characters. Is there a difference in the way certain characters (carriage returns etc) are counted? Below is the javascript I’m using, as well as the text sample.

[CODE]if(document.frmFinal.txtOptComments.value.length > 4000)[/CODE]

~~[QUOTE]~~

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam adipiscing purus ut neque tristique a blandit quam fringilla. Sed sit amet elit sed libero cursus pellentesque quis id massa. Donec quis risus elit. Sed interdum dui sodales nisl venenatis sagittis. Aenean arcu nisl, rutrum at vehicula et, posuere in tortor. Donec nibh erat, placerat iaculis congue at, molestie in turpis. Vivamus porttitor eros ut quam aliquet hendrerit. Morbi vestibulum leo ac massa venenatis ut bibendum quam porta. Donec ultricies sodales dui condimentum tincidunt. Nullam est ante, lacinia ut congue porta, aliquet id tellus. Maecenas quis velit sapien. Suspendisse aliquam, sapien non facilisis mattis, nisl metus ornare magna, quis laoreet dolor magna quis orci. Donec placerat, quam quis gravida ultrices, tortor nunc aliquam tellus, id suscipit orci sapien vel sapien. Aenean vitae lorem velit. In rutrum, tellus iaculis tincidunt faucibus, tortor nunc auctor tortor, non ornare massa enim ut libero. Pellentesque iaculis luctus justo sollicitudin laoreet. Fusce mollis leo feugiat purus suscipit imperdiet. Integer vitae orci ut tortor rutrum dictum nec a leo. Aenean et blandit purus. Proin iaculis odio nec felis congue venenatis.

Nunc id urna vitae dui volutpat sagittis. Curabitur vulputate posuere diam, quis lobortis magna aliquam id. Morbi nulla ante, vulputate eget dapibus eget, porta sit amet nunc. Nam lacinia, quam gravida blandit pellentesque, tortor dui fermentum turpis, vitae dictum erat lectus sed justo. Donec eu vehicula odio. Aenean pharetra rhoncus eleifend. Aenean condimentum tortor eget ligula iaculis rutrum. Phasellus eu enim a tellus venenatis ornare. Suspendisse potenti. Integer dignissim tincidunt varius.

Curabitur eleifend interdum leo, sit amet tempor dui eleifend tristique. Proin vel condimentum lectus. Suspendisse scelerisque dui id neque fermentum nec pretium arcu blandit. Proin a magna eget enim cursus tincidunt ut sit amet sapien. Nunc ac sem ut turpis faucibus sagittis. Nam suscipit convallis erat, vel convallis nulla venenatis eget. Nullam mi ipsum, posuere quis sodales id, sagittis non arcu. Fusce et convallis augue. Nulla porttitor mi in leo molestie et varius nulla malesuada. Quisque imperdiet enim vitae mauris pulvinar imperdiet. Quisque ut sem sit amet quam congue porta. Maecenas in orci id enim aliquam dignissim vestibulum sed mauris. Sed turpis diam, pretium ac feugiat at, consectetur vel eros. Duis feugiat tortor et dolor faucibus ullamcorper. Sed lacus neque, malesuada ut tristique vitae, pellentesque quis metus. Pellentesque semper vestibulum metus sit amet porttitor. In massa velit, semper ut dapibus nec, fermentum a libero. Duis at sapien et diam ullamcorper tristique ut ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam adipiscing purus ut neque tristique a blandit quam fringilla. Sed sit amet elit sed libero cursus pellentesque quis id massa. Donec quis risus elit. Sed interdum dui sodales nisl venenatis sagittis. Aenean arcu nisl, rutrum at vehicula et, posuere in tortor. Donec nibh erat, placerat iaculis congue at, molestie in turpis. Vivamus porttitor eros ut quam aliquet hendrerit. Morbi vestibulum leo ac massa venenatis ut bibendum quam porta. Donec ultricies sodales dui condimentum tincidunt. Nullam est ante, lacinia ut congue porta, aliquet id tellus. Maecenas quis velit sapien. Suspendisse aliquam, sapien non facilisis mattis, nisl metus ornare magna, quis laoreet dolor magna quis orci. Donec placerat, quam quis gravida ultrices, tortor nunc aliquam tellus, id suscipit orci sapien vel sapien. Aenean vitae lorem velit. In rutrum, tellus iaculis tincidunt faucibus, tortor nunc auctor tortor, non ornare massa enim ut libero. Pellentesque iaculis luctus justo sollicitudin laoreet. Fusce mollis leo feugiat purus suscipit imperdiet. Integer vitae orci ut tortor rutrum dictum nec a leo. Aenean et blandit purus. Proin iaculis odio nec felis congue venenatis. congue venenatis. congueeee.
4000

[/QUOTE]

to post a comment

JavaScript

9 Comments(s) _↴

@KorMar 01.2010 — #It returns the correct length for me in Firefox, but not in IE:

<i>
 </i>&lt;textarea onblur="alert(this.value.length)"&gt;&lt;/textarea&gt;

Paste the text (without the bottom 4000 which you have writen for no reason) inside the textarea and quit the field. The alert shows 4000 in FF but 4004 in IE. It looks like IE doubles the carriage return.

@BroodmdhauthorMar 01.2010 — #Odd, the code below gives me a count of 4010.

[CODE]
 <textarea onblur="alert(this.value.length)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam adipiscing purus ut neque tristique a blandit quam fringilla. Sed sit amet elit sed libero cursus pellentesque quis id massa. Donec quis risus elit. Sed interdum dui sodales nisl venenatis sagittis. Aenean arcu nisl, rutrum at vehicula et, posuere in tortor. Donec nibh erat, placerat iaculis congue at, molestie in turpis. Vivamus porttitor eros ut quam aliquet hendrerit. Morbi vestibulum leo ac massa venenatis ut bibendum quam porta. Donec ultricies sodales dui condimentum tincidunt. Nullam est ante, lacinia ut congue porta, aliquet id tellus. Maecenas quis velit sapien. Suspendisse aliquam, sapien non facilisis mattis, nisl metus ornare magna, quis laoreet dolor magna quis orci. Donec placerat, quam quis gravida ultrices, tortor nunc aliquam tellus, id suscipit orci sapien vel sapien. Aenean vitae lorem velit. In rutrum, tellus iaculis tincidunt faucibus, tortor nunc auctor tortor, non ornare massa enim ut libero. Pellentesque iaculis luctus justo sollicitudin laoreet. Fusce mollis leo feugiat purus suscipit imperdiet. Integer vitae orci ut tortor rutrum dictum nec a leo. Aenean et blandit purus. Proin iaculis odio nec felis congue venenatis.
 
 Nunc id urna vitae dui volutpat sagittis. Curabitur vulputate posuere diam, quis lobortis magna aliquam id. Morbi nulla ante, vulputate eget dapibus eget, porta sit amet nunc. Nam lacinia, quam gravida blandit pellentesque, tortor dui fermentum turpis, vitae dictum erat lectus sed justo. Donec eu vehicula odio. Aenean pharetra rhoncus eleifend. Aenean condimentum tortor eget ligula iaculis rutrum. Phasellus eu enim a tellus venenatis ornare. Suspendisse potenti. Integer dignissim tincidunt varius.
 
 Curabitur eleifend interdum leo, sit amet tempor dui eleifend tristique. Proin vel condimentum lectus. Suspendisse scelerisque dui id neque fermentum nec pretium arcu blandit. Proin a magna eget enim cursus tincidunt ut sit amet sapien. Nunc ac sem ut turpis faucibus sagittis. Nam suscipit convallis erat, vel convallis nulla venenatis eget. Nullam mi ipsum, posuere quis sodales id, sagittis non arcu. Fusce et convallis augue. Nulla porttitor mi in leo molestie et varius nulla malesuada. Quisque imperdiet enim vitae mauris pulvinar imperdiet. Quisque ut sem sit amet quam congue porta. Maecenas in orci id enim aliquam dignissim vestibulum sed mauris. Sed turpis diam, pretium ac feugiat at, consectetur vel eros. Duis feugiat tortor et dolor faucibus ullamcorper. Sed lacus neque, malesuada ut tristique vitae, pellentesque quis metus. Pellentesque semper vestibulum metus sit amet porttitor. In massa velit, semper ut dapibus nec, fermentum a libero. Duis at sapien et diam ullamcorper tristique ut ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam adipiscing purus ut neque tristique a blandit quam fringilla. Sed sit amet elit sed libero cursus pellentesque quis id massa. Donec quis risus elit. Sed interdum dui sodales nisl venenatis sagittis. Aenean arcu nisl, rutrum at vehicula et, posuere in tortor. Donec nibh erat, placerat iaculis congue at, molestie in turpis. Vivamus porttitor eros ut quam aliquet hendrerit. Morbi vestibulum leo ac massa venenatis ut bibendum quam porta. Donec ultricies sodales dui condimentum tincidunt. Nullam est ante, lacinia ut congue porta, aliquet id tellus. Maecenas quis velit sapien. Suspendisse aliquam, sapien non facilisis mattis, nisl metus ornare magna, quis laoreet dolor magna quis orci. Donec placerat, quam quis gravida ultrices, tortor nunc aliquam tellus, id suscipit orci sapien vel sapien. Aenean vitae lorem velit. In rutrum, tellus iaculis tincidunt faucibus, tortor nunc auctor tortor, non ornare massa enim ut libero. Pellentesque iaculis luctus justo sollicitudin laoreet. Fusce mollis leo feugiat purus suscipit imperdiet. Integer vitae orci ut tortor rutrum dictum nec a leo. Aenean et blandit purus. Proin iaculis odio nec felis congue venenatis. congue venenatis. congueeee.
 4000</textarea>
 [/CODE]

@Gozzy82Mar 01.2010 — #firefox and ie also give me different lengths

<i>
 </i>function len(someId){
 var t = document.getElementById(someId);
 
 var b = t.value.replace(/(r|n)/gi, '');
 return b.length;
 }

this gives me the same length in ie and ff

@BroodmdhauthorMar 01.2010 — #You're right about the FF and IE difference. IE is the standard browser for this application, but I'd like to make it able to function equally well in both. Is there an easy way to test for the browser type?

@KorMar 01.2010 — #OK, that text looks like 4010 in IE and Opera, but 4005 in FireFox and Chrome. Anyway, there will not be 4000 ever, as javascript considers the carriage return at least as one character in a string.

And, as I said, I suspect IE and Opera counts double the carriage return.

@BroodmdhauthorMar 01.2010 — #Thanks for the help, Kor and Gozzy!

@KorMar 01.2010 — #You may use a function to replace/remove the carriage return. Could be something like this:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function countT(v){
 v=replacecarriagereturn(v,'');
 alert(v.length);
 }
 function replacecarriagereturn(v,replaceWith)
 { 
 v = escape(v);
 //encode all characters in text area
 //to find carriage return character
 for(i=0; i &lt; v.length; i++)
 { 
 //loop through string, replacing carriage return 
 //encoding with HTML break tag
 if(v.indexOf("&amp;#37;0D%0A") &gt; -1)
 { 
 //Windows encodes returns as rn hex
 v=v.replace("%0D%0A",replaceWith);
 }
 else if(v.indexOf("%0A") &gt; -1)
 { 
 //Unix encodes returns as n hex
 v=v.replace("%0A",replaceWith);
 }
 else if(v.indexOf("%0D") &gt; -1)
 { 
 //Macintosh encodes returns as r hex
 v=v.replace("%0D",replaceWith);
 }
 }
 v=unescape(v);
 //decode all characters in text area back
 return v
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;textarea onblur="countT(this.value)"&gt;&lt;/textarea&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

As you can see it is a little bit intricate one, as different browsers count carriage returns in different ways. escaping/unescaping the string could a possibility, but even so there are some differences.

But I suspect the result is OK. I have no mac to test, but I think it will be OK even on a mac

@mrhooMar 01.2010 — #I wasn't sure of the answer so I tried it in IE and firefox-

I got 4004 characters in IE, 4000 in firefox.

Then I searched for /r/g in both and found that IE had 4 returns and firefox had 0-

firefox (and other browsers, I'm sure) converts 'rn' to 'n'.

If you do a textvalue.replace(/rn/g,'n') you'll come out the same in both browsers.

Edit- I see Kor was ahead of me here!

@rnd_meMar 01.2010 — #/r?n/g should match the same number of lines everywhere...

Also in #JavaScript _↴

document.forms[0].item(z) not working in FireFox?Getting the selected range Trouble with JavaScript in PHP (WordPress)

Success!

Help @Broodmdh spread the word by sharing this article on Twitter...

Tweet This

Javascript character count problem

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript character count problem

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴