数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 JavaScript 中处理文本中的制表符、换行符和空格？
在本教程中，我们将学习如何在 JavaScript 中处理文本中的制表符、换行符和空格。
为了在 JavaScript 中处理文本中的制表符、换行符和空格，我们可以使用 `whiteSpace` 属性。此属性具有七个属性：
- normal
- nowrap
- pre
- pre-line
- pre-wrap
- initial
- inherit
通常，在 HTML 中，我们使用 ` ` 实体来表示多个空格，使用 `
` 标签来换行。但在 JavaScript 中，我们使用 `white-space` 属性的不同属性值（主要是 `normal` 和 `pre`）来处理制表符、换行符和多个空格。这两个属性的详细信息如下：
normal - 这是 `whiteSpace` 的默认属性。这里多个空格将被视为一个空格。文本将在需要时换行。
pre - 在这里，我们可以使用多个空格或制表符。这些将被浏览器保留。文本将在用户在文本中换行时换行。
使用 `white-space` 值为“pre”处理制表符
在 JavaScript 中，如果用户希望在文本中使用多个空格或制表符，则 `style.whiteSpace` 属性的“pre”值对文本很有用。这里，多个空格或制表符将保留在浏览器中。此属性值的作用类似于 HTML 的 `
` 标签。要使用此属性，首先我们使用元素的 id 通过 `document.getElementById()` 方法访问 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 的 `
` 标签。要使用此属性，首先我们使用元素的 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` 值适用于普通文本。这意味着当只有单个空格存在时。如果用户想添加多个空格，它们将合并为一个。换行将在必要时发生。
要使用此属性，首先我们使用元素的 id 通过 `document.getElementById()` 方法访问 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年9月15日浏览量：1000+
广告