在前端开发中，我们经常需要将文本格式化并输出到页面上。其中一个常见的需求就是将多行文本转换成带有换行符的HTML，以便在网页上正确显示。这个需求可以通过 nl2br() 函数来实现。
什么是 nl2br()？
nl2br() 是 PHP 中的一个函数，用于将字符串中的换行符 \n 转换为 HTML 的 <br> 标签。例如，下面的 PHP 代码：
----- - ---------------- ---- -------------
输出的结果是：
--------- ------
由于 PHP 比较流行，因此很多人都熟悉 nl2br() 这个函数。但是，在 JavaScript 中，并没有内置的 nl2br() 函数可供使用。那么该如何在 JavaScript 中实现 nl2br() 的功能呢？
等效 JavaScript 代码
要在 JavaScript 中实现 nl2br() 的功能，可以使用正则表达式（Regular Expression）来匹配字符串中的换行符，然后替换为 <br> 标签。具体的代码如下：
-------- ---------- -
-- ------- --- --- --------- -
------ ---
-
------ ------------------------------ --------
-这段代码定义了一个名为 nl2br() 的函数，该函数接受一个字符串参数 str。首先，函数会检查 str 是否为字符串类型，如果不是，则返回空字符串。
然后，函数使用正则表达式 /(?:\r\n|\r|\n)/g 来匹配字符串中的换行符。其中，\r\n 表示 Windows 操作系统下的换行符，\r 表示旧版 Mac 操作系统下的换行符，\n 则表示 Linux 和 macOS 下的换行符。这个正则表达式使用了 | 符号来表示或逻辑，并使用了非捕获分组 (?:) 来避免对括号内的内容进行分组匹配。
最后，函数使用 replace() 方法将匹配到的换行符替换为 <br> 标签，并返回处理后的字符串。
示例代码
下面是一个示例代码，演示如何在 JavaScript 中使用 nl2br() 函数：
--------- -----
------
------
-------------- ----------
-------
------
---- ------------------
--------
-------- ---------- -
-- ------- --- --- --------- -
------ ---
-
------ ------------------------------ --------
-
--- ---- - ----------------
--- ---- - ------------
--- -------- - ----------------------------------
------------------ - -----
---------
-------
-------这段代码定义了一个包含两个 <div> 元素的 HTML 页面。其中，一个元素用于输出原始文本内容，另一个元素用于输出转换后的 HTML 内容。
在 JavaScript 部分，代码首先定义了 nl2br() 函数，然后使用该函数将字符串 "Hello\nworld!" 转换为带有 <br> 标签的 HTML 字符串，并将其赋值给变量 html。最后，代码使用 getElementById() 方法获取输出元素，并将 html 变量的值设置为元素的 innerHTML 属性，以便在页面上正确显示。
总结
通过正则表达式实现 nl2br() 的功能，可以让我们在 JavaScript 中更方便地处理多行文本格式化的需求。同时，这个方法还可以帮助我们深入理解正则表达式的相关知识点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15366