Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 41
  • Last Modified:

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

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
nathaniel
Asked:
nathaniel
2 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Pawan KumarDatabase ExpertCommented:
@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
 
nathanielSystem Applications DeveloperAuthor Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Julian HansenCommented:
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
 
Julian HansenCommented:
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
 
nathanielSystem Applications DeveloperAuthor Commented:
Thank you so much!
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now