如何在 JavaScript 中处理文本中的制表符、换行符和空格？

在本教程中，我们将学习如何在 JavaScript 中处理文本中的制表符、换行符和空格。

为了在 JavaScript 中处理文本中的制表符、换行符和空格，我们可以使用 whiteSpace 属性。此属性具有七个属性：

  • normal
  • nowrap
  • pre
  • pre-line
  • pre-wrap
  • initial
  • inherit

通常，在 HTML 中，我们使用   实体表示多个空格，并使用 <br/> 标签换行。但在 JavaScript 中，我们使用 white-space 属性的不同属性（主要是 normal 和 pre）来处理制表符、换行符和多个空格。这两个属性的详细信息如下：

normal - 它是 whiteSpace 的默认属性。这里多个空格将被视为一个空格。并且文本将在需要时换行。

pre - 在这里，我们可以使用多个空格或制表符。这些将由浏览器保留。并且当用户在文本中换行时，文本将换行。

使用 white-space 值为“pre”处理制表符

在 JavaScript 中，如果用户希望在文本中使用多个空格或制表符，则 style.whiteSpace 属性的“pre”值对文本很有用。这里多个空格或制表符将保留在浏览器中。此属性值充当 HTML 的 pre 标签。

要使用此属性，首先我们通过传递给 document.getElementById() 方法的元素的 id 来访问 DOM 元素。然后设置 style.whiteSpace 属性的“pre”属性来排列文本。我们也可以为相同用途编写“pre-wrap”属性而不是“pre”。语法也将保持不变。

语法

以下是使用 style.whiteSpace 处理 DOM 元素文本的制表符或多个空格的语法：

document.getElementById('element').style.whiteSpace = 'pre';

在上述语法中，“element”是 HTML 元素的 id，并且通过使用 document.getElementById 方法，我们获取元素对象并将 style.whiteSpace 属性设置为“pre”。

示例

在下面的示例中，我们使用 style.whiteSpace 值为“pre”来处理制表符。为此，我们使用了按钮点击事件。

<html>
<body>
   <h3>Handle Tabs Using the white-space value to <i>"pre"</i></h3>
   <button onclick="handleTabs()">Handle Tabs</button>
   <div id="element" style="border: 1px solid black;">Welcome to
      Tutorialspoint. Welcome to Tutorialspoint. Welcome to
   Tutorialspoint.</div>
   <script>
      function handleTabs(){
         document.getElementById('element').style.whiteSpace = 'pre'
      }
   </script>
</body>
</html>

在上面的输出中，用户可以看到在点击按钮后，我们将 style.whiteSpace 值设置为“pre”，因此现在制表符已正确处理。

使用 white-space 值为“pre”处理换行符

在 JavaScript 中，如果用户希望将文本分成多行，则 style.whiteSpace 属性的 pre 属性对文本很有用。在这里，当用户使用 Enter 键换行时，文本将换行。此属性充当 HTML 的 pre 标签。

要使用此属性，首先我们通过传递给 document.getElementById() 方法的元素的 id 来访问 DOM 元素。然后设置 style.whiteSpace 属性的“pre”属性来排列文本。我们也可以为相同用途编写“pre-wrap”或“pre-line”属性而不是“pre”。语法也将保持不变。

用户可以按照以下语法使用 style.whiteSpace 处理 DOM 元素文本的换行符：

语法

document.getElementById('element').style.whiteSpace = 'pre'

在上述语法中，“element”是 HTML 元素的 id，并且通过使用 document.getElementById 方法，我们获取元素对象并将 style.whiteSpace 属性设置为“pre”。

示例

在下面的示例中，我们使用 style.whiteSpace 值为“pre”来处理换行符。为此，我们使用了按钮点击事件。

<html>
<body>
   <h4> Handle Line breaks Using the white-space value to <i> "pre" </i>
   </h4>
   <button onclick = "handleLineBreaks()"> Handle Line breaks </button>
   <div id="element" style="border: 1px solid black;">
      Welcome to Tutorialspoint.
      Welcome to Tutorialspoint.
      Welcome to Tutorialspoint.
   </div>
   <script>
      function handleLineBreaks(){
         document.getElementById('element').style.whiteSpace = 'pre'
      }
   </script>
</body>
</html>

在上面的输出中，用户可以看到在点击按钮后，我们将 style.whiteSpace 值设置为“pre”，因此现在换行符已正确处理。

使用 white-space 值为“normal”处理空格

在 JavaScript 中，style.whiteSpace 属性的 normal 值对普通文本很有用。这意味着当只存在单个空格时。如果用户想要放置多个空格，它们将折叠成一个空格。换行发生在必要时。

要使用此属性，首先我们通过传递给 document.getElementById() 方法的元素的 id 来访问 DOM 元素。然后将 style.whiteSpace 属性设置为“normal”以排列文本。这是 white-space 属性的默认属性。

用户可以按照以下语法使用 style.whiteSpace 设置为“normal”来换行元素的文本：

语法

document.getElementById('element').style.whiteSpace = 'normal'

在上述语法中，“element”是 HTML 元素的 id，并且通过使用 document.getElementById 方法，我们获取元素对象并将 style.whiteSpace 属性设置为“normal”。

示例

在下面的示例中，我们使用 style.whiteSpace 值为“normal”来处理空格。为此，我们使用了按钮点击事件。

<html>
<body>
   <h4>Handle White Spaces Using the white-space value to
   <i>"normal"</i></h4>
   <button onclick = "handleWhiteSpaces()"> Handle White Spaces
   </button>
   <div id="element" style="border: 1px solid black; white-space: pre;">
      Welcome to Tutorialspoint. Welcome to Tutorialspoint.
      Welcome to Tutorialspoint.
   </div>
   <script>
      function handleWhiteSpaces(){
         document.getElementById('element').style.whiteSpace = 'normal'
      }
   </script>
</body>
</html>

在上面的输出中，用户可以看到在点击按钮后，我们将 style.whiteSpace 值设置为“normal”，因此现在空格已正确处理。

更新于： 2022-09-15

1K+ 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告