使用 JavaScript 替換新行

1. 在 JavaScript 中使用 replaceAll() 將換行符替換為 <br/>
2. 在 JavaScript 中使用 replace() 將換行符替換為 <br/>
3. JavaScript 中 replaceAll() 和 replace() 的區別

JavaScript 提供了兩個函式來用 HTML <br/> 替換字串中的新行。在今天的文章中，我們將學習用 HTML 中斷標記 (<br/>) 替換換行符 (\n) 的兩個函式。

在 JavaScript 中使用 replaceAll() 將換行符替換為 <br/>

replaceAll() 是 JavaScript 提供的一個內建方法，它接受兩個輸入引數並返回一個新字串，其中模式的所有匹配都被替換為替換。第一個輸入引數是一個模式，通常是一個 string 或 RegExp。

根據第一個輸入引數，替換可以是每個匹配項都需要呼叫的字串或函式。

語法：

replaceAll(regexp | substr, newSubstr | replacerFunction)

RegEx 或 pattern 是帶有全域性標誌的物件或文字。所有匹配都替換為新的子字串或指定替換函式返回的值。

提供的正規表示式必須包含全域性標誌 g，而不會生成 TypeError: replaceAll must be called with a regular expression。

如果傳遞的是字串而不是正規表示式，則 substr 是應替換為 newSubstr 的字串。它不被解釋為正規表示式，而是被視為文字字串。

第二個引數 replacerFunction 或 newSubstr 是用指定的 regexp 或 substr 引數替換指定子字串（原始字串）的字串。允許使用幾種特殊的替換模式。

呼叫 replacement 或 replacerFunction 函式來建立新的子字串。此函式用指定的 RegEx 或子字串替換（一個或全部）匹配項。

replaceAll() 的輸出是一個新字串，其中包含由替換替換的模式的所有匹配項。

在方法 replaceAll() 的文件中查詢更多資訊。

<div style="white-space: pre-line" id="para">Hello World.
Welcome to my blog post.
Find out all the programming-related articles in one place.
</div>

const p = document.getElementById('para').innerText;

console.log(p.replaceAll('\n', '<br/>'));

const regex = /(?:\r\n|\r|\n)/g;
console.log(p.replaceAll(regex, '<br/>'));

在上面的示例中，我們用字串替換了新行，並將 <br/> 作為新字串應用於宣告。如果要替換複雜的字串，可以使用 RegEx。

這會自動找到適當的模式並將其替換為 replace 函式或 replace 字串。

輸出：

"Hello World.<br/>Welcome to my blog post.<br/>Find out all the programming-related articles in one place.<br/>"
"Hello World.<br/>Welcome to my blog post.<br/>Find out all the programming-related articles in one place.<br/>"

在 JavaScript 中使用 replace() 將換行符替換為 <br/>

replace() 是 JavaScript 提供的一種內建方法，它接受兩個輸入引數並返回一個新字串，其中模式的所有或第一個匹配項都被替換為替換。

第一個輸入引數是一個模式，通常是一個 string 或 RegExp。根據第一個輸入引數，替換可以是每個匹配項都需要呼叫的字串或函式。

模式是字串；它只替換第一個匹配項。

語法：

replace(regexp | substr, newSubstr | replacerFunction)

RegEx 或 pattern 是帶有全域性標誌的物件或文字。所有匹配都替換為新的子字串或指定替換函式返回的值。

提供的正規表示式必須包含全域性標誌 g，而不會生成 TypeError: replaceAll must be called with a regular expression。

如果傳遞的是字串而不是正規表示式，則 substr 是應替換為 newSubstr 的字串。它不會被解釋為正規表示式，而是被視為文字字串。

第二個引數 replacerFunction 或 newSubstr 是用指定的 regexp 或 substr 引數替換指定子字串（原始字串）的字串。允許使用幾種特殊的替換模式。

呼叫 replacement 或 replacerFunction 函式來建立新的子字串。此函式用指定的 RegEx 或子字串替換（一個或全部）匹配項。

replace() 輸出是一個新字串，其中包含替換為替換模式的所有匹配項。

在方法 replace() 的文件中查詢更多資訊。

<div style="white-space: pre-line" id="para">Hello World.
Welcome to my blog post.
Find out all the programming-related articles in one place.
</div>

const p = document.getElementById('para').innerText;

console.log(p.replace('\n', '<br/>'));

const regex = /(?:\r\n|\r|\n)/g;
console.log(p.replace(regex, '<br/>'));

在上面的示例中，我們用字串替換了新行，並將 <br/> 作為新字串應用於宣告。如果要替換複雜的字串，可以使用 RegEx。

這會自動找到適當的模式並將其替換為 replace 函式或 replace 字串。

輸出：

"Hello World.<br/>Welcome to my blog post.
Find out all the programming-related articles in one place.
"

"Hello World.<br/>Welcome to my blog post.<br/>Find out all the programming-related articles in one place.<br/>"

JavaScript 中 replaceAll() 和 replace() 的區別

replaceAll 和 replace 之間的唯一區別是，如果搜尋引數是一個字串，則先前的方法只替換第一個匹配項，而 replaceAll() 方法用替換值替換所有匹配的匹配項而不是第一個匹配項或功能。