使用 JavaScript 替換新行
-
在 JavaScript 中使用
replaceAll()
將換行符替換為<br/>
-
在 JavaScript 中使用
replace()
將換行符替換為<br/>
-
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()
方法用替換值替換所有匹配的匹配項而不是第一個匹配項或功能。
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