如何在 JavaScript 字符串中使用 br 标签

在 JavaScript 字符串中使用 br 标签可以在HTML中实现换行效果。下面将介绍三种在 JavaScript 字符串中使用 br 标签的方法。

1. 使用 replace 方法

可以使用 JavaScript String 对象中的 replace 方法来把字符串中的换行符替换为 br 标签。示例如下：

const str = "这是第一行\n这是第二行";
const newStr = str.replace(/\n/g, "<br>");
console.log(newStr); // 输出：这是第一行<br>这是第二行

以上代码中，replace 方法中的第一个参数使用正则表达式来匹配换行符，第二个参数是要替换成的字符串。

2. 使用 innerHTML 方法

还可以使用 JavaScript 中的 innerHTML 方法把字符串中的回车转换为 br 标签。示例如下：

const str = "这是第一行\n这是第二行";
const elem = document.createElement("div");
elem.innerHTML = str;
console.log(elem.innerHTML); // 输出：<p>这是第一行<br>这是第二行</p>

以上代码中，使用 createElement 方法创建一个 div 元素，将字符串赋值给 innerHTML 属性，字符串中的回车将被转换为 br 标签。

3. 使用 CSS white-space 属性

另外一种方法是使用 CSS white-space 属性来改变空格的处理方式。示例如下：

<div style="white-space: pre-line">这是第一行
这是第二行</div>

以上代码中，将 div 元素的 white-space 属性设置为 pre-line。pre-line 属性会保留空格和换行符，同时会将连续的空白符合并成一个空格，如果有换行符，则自动转换为 br 标签。