迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

使用 JavaScript 替换新行

作者:迹忆客 最近更新:2024/03/21 浏览次数:

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

上一篇:使用 JavaScript 删除所有子元素

下一篇:没有了

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

使用 JavaScript 获取当前 URL

发布时间:2024/03/21 浏览次数:197 分类:JavaScript

在本教程中,我们将讨论如何使用四种不同的方法在 JavaScript 中获取 URL。这些方法将使用 window.location.href、document.location.href、document.URL 和 document.baseURI。

禁用 JavaScript 中的链接

发布时间:2024/03/21 浏览次数:82 分类:JavaScript

通常,锚标记的 href 可以有一个 # 来表示它是未定义的。此外,我们可以使用其他方式来设置 href 未定义,但预定义的目标链接可以通过 eventListener 手动禁用,使用 name 属性,也可以通

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便