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