迹忆客 专注技术分享

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() 方法用替换值替换所有匹配的匹配项而不是第一个匹配项或功能。