Solved

How to get the count of characters in one line displayed on a browser's page

Posted on 2016-11-22
7
29 Views
Last Modified: 2016-11-23
Hi, Im looking for a javascript function for getting the count of characters in one line displayed on a browser's page.  

For example:

The Quick brown fox jumps over the candle stick    
count should be 47

If the browser window is resized and it displayed the sentence like this,
The Quick brown fox jumps over
the candle stick

count should be 30 (does not count the second line, only the first line)
0
Comment
Question by:nathaniel
7 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 41898634
I don't know if that is possible.  The source code is the same in both cases.  I don't know if that aspect of the display rendering is accessible with JavaScript.
0
 
LVL 25

Expert Comment

by:Pawan Kumar
ID: 41898635
@Author - Are you using a TextArea for displaying multiple lines? or some other control ?

Please look at below - Are you looking for a similar functionality ?
https://echo.co/blog/getting-line-count-and-length-javascript
0
 
LVL 6

Author Comment

by:nathaniel
ID: 41898658
Hi Pawan, yeah similar to that but i want the character count instead of length in pixel (on first line).

Whatever html tag maybe used, Div or Textarea, as long as the function is able to return character count on the first line.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41898676
What you can do wrap each char in an inline element and then check the offset top of each to see if it is different from the one next to it.
1. Explode your string
2. Progressively add wrapped chars ex. <span>T</span> in a container (same as the one you are checking) in the same container as the text
3. After appending each char check the offset top - if it is the same as the previous one then keep looking.

Here is a function that demonstrates the concept
HTML
  <button>Go</button>
  <div>
    <p id="check">This is a test to see what happens when this wraps and if we can count the number of chars on the line</p>
  </div>

Open in new window

JavaScript
<script>
$(function() {
  $('button').click(function() {
    p = $('#check');
    var len = getWrapLength(p);
    $('#result').html('Length: ' + len);
  });
});

function getWrapLength(el)
{
  var text = el.text();
  var t = el.clone();
  t.empty().appendTo(el.parent());
  var i;
  var current = 0;
  var cutoff = 0;
  for(var i = 0; i < text.length && cutoff == 0;i++) {
    var s = $('<span/>').text(text[i]);
    t.append(s);

    if (current > 0 && s.offset().top > current) {
      // we have a winner but it might be a word so we need to backtrack
      t.find('span').each(function(i,e) {
        if ($(e).offset().top > current) {
          cutoff = i;
          return false;
        }
      });
    }
    
    current = s.offset().top;
  }
  t.remove();
  return cutoff;
}

</script>

Open in new window

Working sample here
0
 
LVL 52

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41898687
Updated function to handle case of no wrap
function getWrapLength(el)
{
  // get the text
  var text = el.text();
  
  // clone the element so we have the same display parameters
  var t = el.clone();
  
  // add to the parent so same boundary constraints
  t.empty().appendTo(el.parent());

  // keep track of offset
  var current = 0;
  // default to the length of the string - assume no wrap
  var cutoff = text.length;
  var done = false;
  // loop through the string
  for(var i = 0; i < text.length && !done;i++) {
    // wrap char in span and add to cloned container
    var s = $('<span/>').text(text[i]);
    t.append(s);

	// check the offset to see if it changed - note if a word wraps 
	// then the wrapping point could be behind us so ...
    if (current > 0 && s.offset().top > current) {
      // we have a winner but it might be a word so we need to backtrack
	  // and find where the word wrapped
      t.find('span').each(function(i,e) {
	    // wrap point is first span that has an offset higher than current
        if ($(e).offset().top > current) {
		  // index is the breaking char so return that
          cutoff = i;
		  // kill the loop
		  done = true;
		  // kill the .each()
          return false;
        }
      });
    }
    // set the current for the next loop
    current = s.offset().top;
  }
  
  // cleanup
//  t.remove();
  return cutoff;
}

Open in new window

Sample here
0
 
LVL 6

Author Closing Comment

by:nathaniel
ID: 41899256
Thank you so much!
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41899285
You are welcome.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

861 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now