使用 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