如何计算 DOM 元素内的文本行数

htmlweb developmentfront end technology更新于 2024/3/19 14:04:17

概述

计算文档对象模型 (DOM) 元素(无论是 <div>、<p> 还是 <label>)内文本行数的方法主要有两种。第一种方法是，我们将 DOM 元素的高度"offsetHeight"除以输出的行高，得到总行数。

第二种方法则是使用数组的 split() 方法，并将换行符字面量作为参数传入。这样，我们将创建包含换行符前后元素的数组，并计算数组的长度。

算法

步骤 1 − 创建一个 HTML 模板，并在其中添加一个带有 line-height 的 div 元素。 Line-height 是特定行的高度。同时创建一个 span 标签，用于生成输出。

步骤 2 − 现在，在 script 标签内访问行的父元素。使用 offsetHeight 计算父元素的总高度。

var domHeight = a.offsetHeight;

步骤 3 − 使用 style 属性获取线条的 line-height 值。由于 line-height 值也包含单位"px"，因此我们必须使用 parseInt() 来获取其中的数字。

步骤 4 − 现在将提取的值(即 domHeight 和 line-height)相除。

var totalLines = domHeight / line-height;

步骤 5 - 变量"totalLines"包含父元素中的行数。它将返回 span 标签中的行数。

示例

在此示例中，我们将通过使用 offsetHeight 属性计算完整 DOM 元素的高度，然后将 DOM 高度除以 line-height，计算出任意文档对象模型 (DOM) 元素中的行数，最终输出 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.cainiaomax.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>

下图展示了上述示例的输出。其中包含"30px"的行高，该行高除以 DOM 元素的"offsetHeight"，并返回 span 标签中元素的数量。

算法

步骤 1 − 创建一个 HTML 模板，并在其中添加一个 div 元素。创建一个 span 标签，用于生成输出。

步骤 2 − 现在使用 document.getElementById() 访问父元素内的文本。

const textLines = document.getElementById("lines").innerText;

步骤 3 − 使用数组 split() 方法，将换行符("
")作为参数传递给它。 split 方法会将文本的行作为元素存储在数组中。

步骤 4 − 现在我们将使用数组的 length 方法计算数组的长度，该方法将返回元素中文本的行数。

const numLines = textLines.split("
").length;

步骤 5 − 使用 span 标签显示文本行数的输出

document.getElementById("out").innerText=numLines-1;

在此示例中，我们从"numLines"中减去了 1，因为它包含一个额外的换行符元素，该元素在所有文本行开始之前插入。

示例

在此示例中，我们将使用数组 split() 方法计算行数，该方法将访问变量中的 DOM，并借助 split("
") 方法传递一个换行符作为参数，该参数会将所有元素存储在数组中作为换行符。之后，我们将计算数组的长度，并返回 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.cainiaomax.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>

下图展示了上述示例的输出。其中所有三行文本都作为元素存储在数组中。因此，计算数组长度时将返回 3。