使用 JavaScript 替換新行

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 replaceAll() 將換行符替換為 <br/>
  2. 在 JavaScript 中使用 replace() 將換行符替換為 <br/>
  3. JavaScript 中 replaceAll()replace() 的區別
使用 JavaScript 替換新行

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

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

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

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

語法:

replaceAll(regexp | substr, newSubstr | replacerFunction)

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

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

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

第二個引數 replacerFunctionnewSubstr 是用指定的 regexpsubstr 引數替換指定子字串(原始字串)的字串。允許使用幾種特殊的替換模式。

呼叫 replacementreplacerFunction 函式來建立新的子字串。此函式用指定的 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 提供的一種內建方法,它接受兩個輸入引數並返回一個新字串,其中模式的所有或第一個匹配項都被替換為替換。

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

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

語法:

replace(regexp | substr, newSubstr | replacerFunction)

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

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

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

第二個引數 replacerFunctionnewSubstr 是用指定的 regexpsubstr 引數替換指定子字串(原始字串)的字串。允許使用幾種特殊的替換模式。

呼叫 replacementreplacerFunction 函式來建立新的子字串。此函式用指定的 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() 的區別

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

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn