Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-11-22
7
Medium Priority
?
37 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 84

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 30

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 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 59

Expert Comment

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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

715 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