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

javascriptobject oriented programmingfront end technology更新于 2025/4/29 9:48:17

在本教程中，我们将学习如何在 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 标签。

要使用此属性，首先，我们通过使用元素的 id 通过 document.getElementById() 方法访问 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>