Solved

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

Posted on 2016-11-22
7
35 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 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 29

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 58

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 58

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 58

Expert Comment

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

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

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…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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

615 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