資料結構
網路
關係型資料庫管理系統
作業系統
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 中，我們使用 實體表示多個空格，並使用 <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”，因此現在空格已正確處理。
1K+ 次檢視
