?
Solved

count lines in a textarea

Posted on 2005-04-06
15
Medium Priority
?
5,438 Views
Last Modified: 2008-01-09
Hi guys !!

it's urgent, so I'm rewarding the maximum amount of points allowed !

I need to count the number of lines a text is taking in a textarea. My first try is splitting the text by the line feed (\n), but it do the work just partially. I mean it just split when there's an explicit line feed (by the user hitting enter) but it does nothing regarding the automatic line feeds, when the text reaches the right margin of the textarea and automatically goes on the next line. Any ideas? Please test it a little before posting, I've already tried several things. Thanx everybody.


alambres
0
Comment
Question by:alambres
  • 5
  • 4
  • 2
  • +2
15 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 13718366
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13718395
SEE KNIGHTEKNIGHTS ANSWER:
He has 2 methods which is awesome:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20672517.html
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13718638
This works for 0, 1 or many lines

<script>
function countLines(){
 txt=document.getElementById('t1').value
 lines=0
 if (txt!=''){
  lines=1
  if (/[\n\r]{2}/.test(txt))
    lines=txt.match(/[\n\r]{2}/g).length
 }
 return lines
}
</script>

<textarea id="t1" rows="10" cols="25">
line 1
line 2

line 3+blank above
</textarea> </p>

<input type="button" onclick="alert(countLines())">
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 32

Expert Comment

by:Batalf
ID: 13718649
I haven't tested the links from Archana yet, there might be something there.

Otherwise, my little script below might help.

But: You have to use a fixed font in order make this work. That's why I chose courier.

<html>
<head>
<style type="text/css">
body{
background-color: #FFFFFF;
margin:0px;
}
</style>
<script type="text/javascript">
function countLines(){
    var value = document.forms[0].myArea.value;
    var items = value.split('\n');
    var lines = 0;
    for(var no=0;no<items.length;no++){
        lines += Math.ceil(items[no].length/40);    
    }
    document.getElementById('myDiv').innerHTML = lines;    
}

</script>
</head>

<body>
<form>
<textarea cols="41" rows="35" style="font-family:courier" onkeyup="countLines()" name="myArea"></textarea>
</form>
<div id="myDiv"></div>
</body>
</html>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13719486
Here my version:


<html>
<head>
<script>
function countLines(theArea){
  var theText = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n");
  theArea.form.lineCount.value = theText.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>


0
 
LVL 32

Expert Comment

by:Batalf
ID: 13719565
Zvonko,

You make me remember that simple is beautiful!!!

Very, very nice:-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13719584
Thanks :)
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13723063
true but it does not work, this is my try

<script>
function countLines(){
 txt=document.getElementById('t1').value
 if (txt=='') return 0
 txtArr=txt.split('\n')
 return  txtArr.length
}
</script>

<form>
<textarea id="t1" rows="10" cols="25" onkeyup="this.form.count.value=countLines()">
</textarea></p>
<input name="count" size="4"> Lines
</form>

0
 
LVL 32

Expert Comment

by:Batalf
ID: 13724949
Well, that only count physical newlines.

You have to count both number of characters and new lines. Maybe Zvonko's code will work by modifying theArea.cols in the function. It seems that there's only room for 9 characters in a 10 col textarea.

Batalf
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 13725246
Thanks Batalf, it seams I did not test enough.
Here a better tested version:

<html>
<head>
<script>
function countLines(theArea){
  var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n");
  if(theLines[theLines.length-1]=="") theLines.length--;
  theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>

0
 
LVL 5

Author Comment

by:alambres
ID: 13728275
Hey guys !!

Thanx everybody!

Zvonko, really great job ! It works superfine. Just with one exception, that I'm getting crazy on trying to solve. My textarea got a css class with Arial font, which is not width-fixed, so I have a great trouble with the cols attribute. I donno. Any idea?

Thinking in another ways, without changing the stylesheet, I wonder if there's a way to get the font height, or line height?
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13728573
No, there's no easy Javascript  method to measure the width of the letters.

The only way I can think of is if you open each letter in Photoshop, measure the width pixel by pixel and create a javascript array out of those widths. But as you probably understand, it would be unreliable and a nightmare to work with. Font width could also be different on Windows, Mac and Linux.

Batalf
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13728671
It works for me:
<html>
<head>
<style>
TEXTAREA {
  font-size: 72px;
}
</style>
<script>
function countLines(theArea){
  var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n");
  if(theLines[theLines.length-1]=="") theLines.length--;
  theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>

Post your style definitions to see what the problem is, please.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13728716
Uhps, sorry, I just discovered you are talking about proportional (non-fixed-width) font:
<style>
TEXTAREA {
  font-family: Arial;
  font-size: 72px;
}
</style>

I have no idea for that, sorry.

0
 
LVL 5

Author Comment

by:alambres
ID: 13735109
Hi again !

I've found a trick to solve the proportional fonts. I'm posting the code, in case you're interested. Anyway, since Zvonko's solution is very fine for the fixed-width fonts, I'm getting him the points. Thank you all.

Here's the code:

<html>
<head>
<style type="text/css">
.campa {  font-family: Arial,Helvetica, sans-serif; font-size: 10pt; color: #000000; background-color: #FFFFFF;}
</style>
<script type="text/javascript">

function countLines(theArea)
{

//zvonko's : for fixed-width fonts (ex. Courier)
  var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n");
  if(theLines[theLines.length-1]=="") theLines.length--;
  theArea.form.lineCount.value = theLines.length;
  theArea.form.charCount.value = theArea.value.length;
}

function countLines2(theArea)
{
//alambres' : for non fixed-width fonts (ex. Arial)
      var TALC = document.getElementById('TA_lineCounter');
      TALC.style.display = 'block';
      TALC.style.width = theArea.offsetWidth + 'px';
      TALC.innerHTML = "a";
      var lineH = TALC.offsetHeight - (parseInt(TALC.style.borderWidth)*2);
      var str = theArea.value.replace(/\n/g,"<br/>");
      
      var bGoOn;
      var aw = theArea.value.split();
      for (var i=0;i<aw.length;i++)
      {
            TALC.innerHTML = aw[i];
            if (TALC.offsetWidth > parseInt(TALC.style.width))
            {
                  bGoOn = true;
                  for (var j=aw[i].length-1;j>0 && bGoOn;j--)
                  {
                        TALC.innerHTML = aw[i].substring(0,j);
                        bGoOn = TALC.offsetWidth > parseInt(TALC.style.width);
                        if (!bGoOn)
                        {
                              str = str.replace(aw[i],aw[i].substring(0,j)+"<br/>"+aw[i].substring(j,aw[i].length));
                              TALC.innerHTML = aw[i].substring(j,j.length);
                              if (TALC.offsetWidth > parseInt(TALC.style.width))
                              {
                                    bGoOn = true;
                                    aw[i] = aw[i].substring(j,aw[i].length);
                                    j = aw[i].length-1;
                              }
                        }
                  }
            }
      }
      
      TALC.innerHTML = str;
      var lines = (TALC.offsetHeight - (parseInt(TALC.style.borderWidth)*2)) / lineH;
      
      theArea.form.charCount.value = theArea.value.length;
      theArea.form.lineCount.value = lines;
 
      TALC.style.display = 'none';

}

</script>
</head>
<body>
<form>
<!-- <textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10"> -->
<textarea name="myText" onKeyUp="countLines2(this)" rows="10" cols="30" class="campa">
</textarea>

<br/>

<span id="TA_lineCounter" class="campa" style="display:none;overflow-y:scroll;border:3px inset;">
</span>

<br/>
Chars:
<input type=text name="charCount" size="2" value="0"/><br/>
Lines:
<input type=text name="lineCount" size="2" value="0"/><br/>


</form>
</body>
</html>



 alambres
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question