Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to the count text lines inside of DOM element
Overview
The number of the text lines inside the Document Object Model (DOM) element whether it would be any element that is <div>, <p> or <label> can be deliberate mainly in two approaches. In the first approach we will be dividing the “offsetHeight” that is height of the DOM element with the line height in output which will give the total number of lines.
In the second approach we will be using the split() method of an array in which we will be passing the line break literal as argument. So the array will be created of the elements before and after the line break and we will calculate the length of the array.
Algorithm
Step 1 − Create a HTML template, add a div element in it with line-height. Line-height is the height of the particular line. Also create a span tag in which the output will be generated.
Step 2 − Now inside the script tag access the parent element of the lines. Calculate the total height of the parent element using offsetHeight.
var domHeight = a.offsetHeight;
Step 3 − Get the value of the line-height of the lines using the style property. As the line-height value also contains the unit that is “px” so we had to use the parseInt() to get the number from it.
Step 4 − Now divide the extracted values that are the domHeight and line-height.
var totalLines = domHeight / linesHeight;
Step 5- The variable “totalLines” contains the number of lines in the parent element. Which will return the number of lines in the span tag.
Example
In this example, we will count the number of lines in any Document Object Model (DOM) element by calculating the height of the full DOM element using the offsetHeight property and dividing the DOM height by the line-height, which will give us the output as the total number of lines present in the DOM.
<html>
<head>
<title>Count the text lines inside of DOM element</title>
</head>
<body>
<div id="lines" style="line-height: 30px;">
Welcome to tutorialspoint<br>
Visit us at: https://www.tutorialspoint.com/<br>
Buy the course of your domain <br>
Get the certificate <br>
Thank you for visiting<br>
</div>
<strong style="border: 2px solid black; padding: 0.1rem;">
Total number of lines:
<span id="out"></span>
</strong>
<script>
var a = document.getElementById("lines");
var domHeight = a.offsetHeight;
var linesHeight = parseInt(a.style.lineHeight);
var totalLines = domHeight / linesHeight;
document.getElementById("out").innerText=totalLines;
</script>
</body>
</html>
In the below image, it shows the output of the above example. In which it contains the line-height of “30px”, which divides the “offsetHeight” of the DOM element and return the number of elements in the span tag.
Algorithm
Step 1 − Create a HTML template, add a div element in it. Create a span tag in which the output will be generated.
Step 2 − Now access the text inside the parent element using the document.getElementById().
const textLines = document.getElementById("lines").innerText;
Step 3 − Use array split() method, pass the line-break literal (“
”) to it as argument. The split method will store the lines of the text inside the array as an element.
Step 4 − Now we will use the length method of array to calculate the length of an array which will return the number of text lines in the element.
const numLines = textLines.split("
").length;
Step 5 − Display the output of the number of text lines in span tag using
document.getElementById("out").innerText=numLines-1;
In this we had subtracted one from the “numLines” as it contains an extra line-break element which was inserted before all the text lines were started.
Example
In this example, we will calculate the number of lines by using the array split() method in which we will access the DOM in a variable and with the help of split(“
”) method we will pass a line break as argument which will store all the element in an array as the line breaks. After which we will calculate the length of an array, which will return the number of text lines available in the DOM.
<html>
<head>
<title>Count the text lines inside of DOM element</title>
</head>
<body>
<div id="lines" style="line-height: 30px;">
Welcome to tutorialspoint<br>
Visit us at: https://www.tutorialspoint.com/<br>
Thank you for visiting<br>
</div>
<strong style="border: 2px solid black; padding: 0.1rem;">
Total number of lines:
<span id="out"></span>
</strong>
<script>
const textLines = document.getElementById("lines").innerText;
const numLines = textLines.split("
").length;
document.getElementById("out").innerText=numLines-1;
</script>
</body>
</html>
In the below image, it shows the output of the above example. In which all the three text lines are stored in the array as an element. So on calculating the length of an array it will return 3.
Conclusion
In the first example we had to parse the value of the line-height with parseInt() because it contains the string value also and if we divide that value from the “offsetHeight” value then it will return (NaN) which means “Not A Number”. So we had used parseInt(), but we can also use parseFloat() if we want to return it in decimal.
587 Views
To Continue Learning Please Login