Solved

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

Posted on 2016-11-22
7
18 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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 17

Expert Comment

by:Pawan Kumar Khowal
Comment Utility
@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
Comment Utility
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 Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
Thank you so much!
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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 …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

772 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

9 Experts available now in Live!

Get 1:1 Help Now