資料結構
網路
關係資料庫管理系統 (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+
廣告